@orianatech/pire 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/core/Heading.d.cts +15 -0
- package/dist/components/core/Heading.d.ts +16 -0
- package/dist/components/core/Heading.d.ts.map +1 -0
- package/dist/components/core/IconButton.d.cts +12 -0
- package/dist/components/core/IconButton.d.ts +12 -0
- package/dist/components/core/IconButton.d.ts.map +1 -1
- package/dist/components/core/Link.d.cts +13 -0
- package/dist/components/core/Link.d.ts +14 -0
- package/dist/components/core/Link.d.ts.map +1 -0
- package/dist/components/core/Separator.d.cts +12 -0
- package/dist/components/core/Separator.d.ts +13 -0
- package/dist/components/core/Separator.d.ts.map +1 -0
- package/dist/components/core/Text.d.cts +29 -0
- package/dist/components/core/Text.d.ts +30 -0
- package/dist/components/core/Text.d.ts.map +1 -0
- package/dist/components/data/DataTable.d.cts +7 -1
- package/dist/components/data/DataTable.d.ts +7 -1
- package/dist/components/data/DataTable.d.ts.map +1 -1
- package/dist/components/data/FilterBar.d.cts +7 -1
- package/dist/components/data/FilterBar.d.ts +7 -1
- package/dist/components/data/FilterBar.d.ts.map +1 -1
- package/dist/components/feedback/Dialog.d.ts.map +1 -1
- package/dist/components/feedback/InlineMessage.d.ts.map +1 -1
- package/dist/components/feedback/Toast.d.ts.map +1 -1
- package/dist/components/forms/ComboBox.d.ts.map +1 -1
- package/dist/components/forms/DatePicker.d.ts.map +1 -1
- package/dist/components/forms/MultiComboBox.d.ts.map +1 -1
- package/dist/components/forms/NumberField.d.ts.map +1 -1
- package/dist/components/forms/ValueHelpField.d.ts.map +1 -1
- package/dist/components/layout/PageBand.d.cts +15 -0
- package/dist/components/layout/PageBand.d.ts +16 -0
- package/dist/components/layout/PageBand.d.ts.map +1 -0
- package/dist/components/navigation/Menu.d.cts +39 -0
- package/dist/components/navigation/Menu.d.ts +40 -0
- package/dist/components/navigation/Menu.d.ts.map +1 -0
- package/dist/components/navigation/Pagination.d.ts.map +1 -1
- package/dist/components/navigation/SideNav.d.ts.map +1 -1
- package/dist/components/patterns/SidePanel.d.ts.map +1 -1
- package/dist/components/patterns/ValueHelpDialog.d.ts.map +1 -1
- package/dist/components.css +85 -0
- package/dist/i18n/PireIntlProvider.d.cts +21 -0
- package/dist/i18n/PireIntlProvider.d.ts +22 -0
- package/dist/i18n/PireIntlProvider.d.ts.map +1 -0
- package/dist/i18n/messages.d.cts +66 -0
- package/dist/i18n/messages.d.ts +67 -0
- package/dist/i18n/messages.d.ts.map +1 -0
- package/dist/index.cjs +830 -488
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +797 -462
- package/dist/index.js.map +1 -1
- package/dist/tokens/base.css +3 -0
- package/dist/tokens/typography.css +5 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -42,43 +42,53 @@ __export(src_exports, {
|
|
|
42
42
|
DatePicker: () => DatePicker,
|
|
43
43
|
DescriptionList: () => DescriptionList,
|
|
44
44
|
Dialog: () => Dialog,
|
|
45
|
-
DialogTrigger: () =>
|
|
45
|
+
DialogTrigger: () => import_react_aria_components29.DialogTrigger,
|
|
46
46
|
EmptyState: () => EmptyState,
|
|
47
47
|
FilterBar: () => FilterBar,
|
|
48
48
|
FooterBar: () => FooterBar,
|
|
49
49
|
FormField: () => FormField,
|
|
50
|
-
|
|
50
|
+
Heading: () => Heading,
|
|
51
|
+
I18nProvider: () => import_react_aria_components29.I18nProvider,
|
|
51
52
|
Icon: () => Icon,
|
|
52
53
|
IconButton: () => IconButton,
|
|
53
54
|
InlineMessage: () => InlineMessage,
|
|
54
55
|
Input: () => Input,
|
|
55
56
|
KpiTile: () => KpiTile,
|
|
57
|
+
Link: () => Link,
|
|
56
58
|
LinkList: () => LinkList,
|
|
57
|
-
Menu: () =>
|
|
58
|
-
MenuItem: () =>
|
|
59
|
-
|
|
59
|
+
Menu: () => Menu,
|
|
60
|
+
MenuItem: () => MenuItem,
|
|
61
|
+
MenuSection: () => MenuSection,
|
|
62
|
+
MenuSeparator: () => MenuSeparator,
|
|
63
|
+
MenuTrigger: () => import_react_aria_components29.MenuTrigger,
|
|
60
64
|
MultiComboBox: () => MultiComboBox,
|
|
61
65
|
NumberField: () => NumberField,
|
|
62
66
|
ObjectHeader: () => ObjectHeader,
|
|
67
|
+
PageBand: () => PageBand,
|
|
63
68
|
PageHeader: () => PageHeader,
|
|
64
69
|
Pagination: () => Pagination,
|
|
65
|
-
|
|
70
|
+
PireIntlProvider: () => PireIntlProvider,
|
|
71
|
+
Popover: () => import_react_aria_components29.Popover,
|
|
66
72
|
ProgressBar: () => ProgressBar,
|
|
67
73
|
Radio: () => Radio,
|
|
68
74
|
RadioGroup: () => RadioGroup,
|
|
75
|
+
RouterProvider: () => import_react_aria_components29.RouterProvider,
|
|
69
76
|
SectionHeader: () => SectionHeader,
|
|
70
77
|
SegmentedControl: () => SegmentedControl,
|
|
71
78
|
Select: () => Select,
|
|
72
79
|
SelectionBar: () => SelectionBar,
|
|
73
|
-
Separator: () =>
|
|
80
|
+
Separator: () => Separator,
|
|
74
81
|
ShellBar: () => ShellBar,
|
|
75
82
|
SideNav: () => SideNav,
|
|
76
83
|
SidePanel: () => SidePanel,
|
|
77
84
|
Skeleton: () => Skeleton,
|
|
78
85
|
SkeletonTableRow: () => SkeletonTableRow,
|
|
86
|
+
Strong: () => Strong,
|
|
87
|
+
SubmenuTrigger: () => import_react_aria_components29.SubmenuTrigger,
|
|
79
88
|
Switch: () => Switch,
|
|
80
89
|
Tabs: () => Tabs,
|
|
81
90
|
Tag: () => Tag,
|
|
91
|
+
Text: () => Text,
|
|
82
92
|
TextArea: () => TextArea,
|
|
83
93
|
Timeline: () => Timeline,
|
|
84
94
|
Toast: () => Toast,
|
|
@@ -87,6 +97,9 @@ __export(src_exports, {
|
|
|
87
97
|
ValueHelpDialog: () => ValueHelpDialog,
|
|
88
98
|
ValueHelpField: () => ValueHelpField,
|
|
89
99
|
configureIcons: () => configureIcons,
|
|
100
|
+
enMessages: () => enMessages,
|
|
101
|
+
esMessages: () => esMessages,
|
|
102
|
+
usePireMessages: () => usePireMessages,
|
|
90
103
|
useToast: () => useToast
|
|
91
104
|
});
|
|
92
105
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -346,8 +359,21 @@ function Tooltip({ label, placement = "top", delay = 500, children }) {
|
|
|
346
359
|
|
|
347
360
|
// src/components/core/IconButton.tsx
|
|
348
361
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
349
|
-
var IconButton = React2.forwardRef(function IconButton2({
|
|
350
|
-
|
|
362
|
+
var IconButton = React2.forwardRef(function IconButton2({
|
|
363
|
+
icon,
|
|
364
|
+
label,
|
|
365
|
+
size = "md",
|
|
366
|
+
variant = "tertiary",
|
|
367
|
+
selected,
|
|
368
|
+
hideTooltip,
|
|
369
|
+
count,
|
|
370
|
+
countMax = 9,
|
|
371
|
+
countVariant = "number",
|
|
372
|
+
className,
|
|
373
|
+
...rest
|
|
374
|
+
}, ref) {
|
|
375
|
+
const showsCount = count != null && count > 0;
|
|
376
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
351
377
|
import_react_aria_components3.Button,
|
|
352
378
|
{
|
|
353
379
|
ref,
|
|
@@ -357,8 +383,12 @@ var IconButton = React2.forwardRef(function IconButton2({ icon, label, size = "m
|
|
|
357
383
|
"data-size": size,
|
|
358
384
|
"data-variant": variant,
|
|
359
385
|
"data-selected": selected ? "true" : void 0,
|
|
386
|
+
"data-has-count": showsCount ? "true" : void 0,
|
|
360
387
|
...rest,
|
|
361
|
-
children:
|
|
388
|
+
children: [
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: icon, size: size === "lg" ? 20 : 16 }),
|
|
390
|
+
showsCount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "pire-iconbtn-count", "data-variant": countVariant, "aria-hidden": "true", children: countVariant === "number" ? count > countMax ? `${countMax}+` : count : null }) : null
|
|
391
|
+
]
|
|
362
392
|
}
|
|
363
393
|
);
|
|
364
394
|
return hideTooltip ? button : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { label, children: button });
|
|
@@ -481,25 +511,131 @@ function SegmentedControl({
|
|
|
481
511
|
);
|
|
482
512
|
}
|
|
483
513
|
|
|
484
|
-
// src/components/
|
|
514
|
+
// src/components/core/Text.tsx
|
|
485
515
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
516
|
+
function Text({
|
|
517
|
+
size = "body",
|
|
518
|
+
color = "primary",
|
|
519
|
+
weight = "regular",
|
|
520
|
+
numeric,
|
|
521
|
+
eyebrow,
|
|
522
|
+
truncate,
|
|
523
|
+
elementType: Wrapper = "p",
|
|
524
|
+
className,
|
|
525
|
+
style,
|
|
526
|
+
...rest
|
|
527
|
+
}) {
|
|
528
|
+
const lineClamp = typeof truncate === "number" ? truncate : truncate ? 1 : void 0;
|
|
529
|
+
const clampStyle = lineClamp == null ? style : { ["--pire-text-clamp"]: lineClamp, ...style };
|
|
530
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
531
|
+
Wrapper,
|
|
532
|
+
{
|
|
533
|
+
className: cx("pire-text", className),
|
|
534
|
+
"data-size": size,
|
|
535
|
+
"data-color": color,
|
|
536
|
+
"data-weight": weight === "strong" ? "strong" : void 0,
|
|
537
|
+
"data-numeric": numeric ? "true" : void 0,
|
|
538
|
+
"data-eyebrow": eyebrow ? "true" : void 0,
|
|
539
|
+
"data-truncate": lineClamp != null ? "true" : void 0,
|
|
540
|
+
style: clampStyle,
|
|
541
|
+
...rest
|
|
542
|
+
}
|
|
543
|
+
);
|
|
544
|
+
}
|
|
545
|
+
function Strong({ className, ...rest }) {
|
|
546
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { elementType: "span", weight: "strong", className, ...rest });
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
// src/components/core/Heading.tsx
|
|
550
|
+
var import_react_aria_components6 = require("react-aria-components");
|
|
551
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
552
|
+
function Heading({
|
|
553
|
+
level = 2,
|
|
554
|
+
size,
|
|
555
|
+
color = "primary",
|
|
556
|
+
truncate,
|
|
557
|
+
className,
|
|
558
|
+
style,
|
|
559
|
+
...rest
|
|
560
|
+
}) {
|
|
561
|
+
const lineClamp = typeof truncate === "number" ? truncate : truncate ? 1 : void 0;
|
|
562
|
+
const clampStyle = lineClamp == null ? style : { ["--pire-text-clamp"]: lineClamp, ...style };
|
|
563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
564
|
+
import_react_aria_components6.Heading,
|
|
565
|
+
{
|
|
566
|
+
level,
|
|
567
|
+
className: cx("pire-heading", className),
|
|
568
|
+
"data-size": size ?? `h${level}`,
|
|
569
|
+
"data-color": color,
|
|
570
|
+
"data-truncate": lineClamp != null ? "true" : void 0,
|
|
571
|
+
style: clampStyle,
|
|
572
|
+
...rest
|
|
573
|
+
}
|
|
574
|
+
);
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
// src/components/core/Link.tsx
|
|
578
|
+
var import_react_aria_components7 = require("react-aria-components");
|
|
579
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
580
|
+
function Link({ children, size, isExternal, className, rel, ...rest }) {
|
|
581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
582
|
+
import_react_aria_components7.Link,
|
|
583
|
+
{
|
|
584
|
+
className: cx("pire-link", className),
|
|
585
|
+
"data-size": size,
|
|
586
|
+
"data-external": isExternal ? "true" : void 0,
|
|
587
|
+
rel: isExternal ? rel ?? "noopener noreferrer" : rel,
|
|
588
|
+
...rest,
|
|
589
|
+
children: [
|
|
590
|
+
children,
|
|
591
|
+
isExternal ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "external-link", size: 12, className: "pire-link-external" }) : null
|
|
592
|
+
]
|
|
593
|
+
}
|
|
594
|
+
);
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
// src/components/core/Separator.tsx
|
|
598
|
+
var import_react_aria_components8 = require("react-aria-components");
|
|
599
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
600
|
+
function Separator({
|
|
601
|
+
orientation = "horizontal",
|
|
602
|
+
emphasis = "default",
|
|
603
|
+
spacing = "md",
|
|
604
|
+
className,
|
|
605
|
+
...rest
|
|
606
|
+
}) {
|
|
607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
608
|
+
import_react_aria_components8.Separator,
|
|
609
|
+
{
|
|
610
|
+
orientation,
|
|
611
|
+
className: cx("pire-separator", className),
|
|
612
|
+
"data-orientation": orientation,
|
|
613
|
+
"data-emphasis": emphasis,
|
|
614
|
+
"data-spacing": spacing,
|
|
615
|
+
...rest
|
|
616
|
+
}
|
|
617
|
+
);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
// src/components/forms/FormField.tsx
|
|
621
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
486
622
|
function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked", children, className, ...rest }) {
|
|
487
|
-
return /* @__PURE__ */ (0,
|
|
488
|
-
/* @__PURE__ */ (0,
|
|
623
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx("pire-field", className), "data-layout": layout, ...rest, children: [
|
|
624
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "pire-field-label", htmlFor, children: [
|
|
489
625
|
label,
|
|
490
|
-
isRequired ? /* @__PURE__ */ (0,
|
|
626
|
+
isRequired ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
491
627
|
] }),
|
|
492
628
|
children,
|
|
493
|
-
error ? /* @__PURE__ */ (0,
|
|
494
|
-
/* @__PURE__ */ (0,
|
|
629
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "pire-field-error", role: "alert", children: [
|
|
630
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "alert-circle", size: 12 }),
|
|
495
631
|
error
|
|
496
|
-
] }) : hint ? /* @__PURE__ */ (0,
|
|
632
|
+
] }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-field-hint", children: hint }) : null
|
|
497
633
|
] });
|
|
498
634
|
}
|
|
499
635
|
|
|
500
636
|
// src/components/forms/Input.tsx
|
|
501
|
-
var
|
|
502
|
-
var
|
|
637
|
+
var import_react_aria_components9 = require("react-aria-components");
|
|
638
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
503
639
|
function Input({
|
|
504
640
|
label,
|
|
505
641
|
icon,
|
|
@@ -515,8 +651,8 @@ function Input({
|
|
|
515
651
|
onChange,
|
|
516
652
|
...rest
|
|
517
653
|
}) {
|
|
518
|
-
return /* @__PURE__ */ (0,
|
|
519
|
-
|
|
654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
655
|
+
import_react_aria_components9.TextField,
|
|
520
656
|
{
|
|
521
657
|
className: cx("pire-field", className),
|
|
522
658
|
style,
|
|
@@ -524,12 +660,12 @@ function Input({
|
|
|
524
660
|
validationBehavior: "aria",
|
|
525
661
|
...rest,
|
|
526
662
|
children: [
|
|
527
|
-
label ? /* @__PURE__ */ (0,
|
|
663
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_aria_components9.Label, { className: "pire-field-label", children: [
|
|
528
664
|
label,
|
|
529
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
665
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
530
666
|
] }) : null,
|
|
531
|
-
/* @__PURE__ */ (0,
|
|
532
|
-
|
|
667
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
668
|
+
import_react_aria_components9.Group,
|
|
533
669
|
{
|
|
534
670
|
className: "pire-control",
|
|
535
671
|
"data-size": size,
|
|
@@ -537,14 +673,14 @@ function Input({
|
|
|
537
673
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
538
674
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
539
675
|
children: [
|
|
540
|
-
icon ? /* @__PURE__ */ (0,
|
|
541
|
-
/* @__PURE__ */ (0,
|
|
542
|
-
suffix ? /* @__PURE__ */ (0,
|
|
676
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: icon, size: 16, className: "pire-leading-icon" }) : null,
|
|
677
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components9.Input, { ref: inputRef, className: "pire-input", "data-numeric": numeric ? "true" : void 0 }),
|
|
678
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-affix", children: suffix }) : null
|
|
543
679
|
]
|
|
544
680
|
}
|
|
545
681
|
),
|
|
546
|
-
description ? /* @__PURE__ */ (0,
|
|
547
|
-
/* @__PURE__ */ (0,
|
|
682
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components9.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
683
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components9.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
548
684
|
]
|
|
549
685
|
}
|
|
550
686
|
);
|
|
@@ -552,8 +688,8 @@ function Input({
|
|
|
552
688
|
|
|
553
689
|
// src/components/forms/TextArea.tsx
|
|
554
690
|
var React5 = __toESM(require("react"), 1);
|
|
555
|
-
var
|
|
556
|
-
var
|
|
691
|
+
var import_react_aria_components10 = require("react-aria-components");
|
|
692
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
557
693
|
var useIsomorphicLayoutEffect = typeof document === "undefined" ? React5.useEffect : React5.useLayoutEffect;
|
|
558
694
|
function TextArea({
|
|
559
695
|
label,
|
|
@@ -594,8 +730,8 @@ function TextArea({
|
|
|
594
730
|
}
|
|
595
731
|
grow();
|
|
596
732
|
}, [autoGrow, grow, rest.value]);
|
|
597
|
-
return /* @__PURE__ */ (0,
|
|
598
|
-
|
|
733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
734
|
+
import_react_aria_components10.TextField,
|
|
599
735
|
{
|
|
600
736
|
className: cx("pire-field", className),
|
|
601
737
|
style,
|
|
@@ -603,12 +739,12 @@ function TextArea({
|
|
|
603
739
|
validationBehavior: "aria",
|
|
604
740
|
...rest,
|
|
605
741
|
children: [
|
|
606
|
-
label ? /* @__PURE__ */ (0,
|
|
742
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_aria_components10.Label, { className: "pire-field-label", children: [
|
|
607
743
|
label,
|
|
608
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
744
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
609
745
|
] }) : null,
|
|
610
|
-
/* @__PURE__ */ (0,
|
|
611
|
-
|
|
746
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
747
|
+
import_react_aria_components10.Group,
|
|
612
748
|
{
|
|
613
749
|
className: "pire-control",
|
|
614
750
|
"data-size": size,
|
|
@@ -616,8 +752,8 @@ function TextArea({
|
|
|
616
752
|
"data-multiline": "true",
|
|
617
753
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
618
754
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
619
|
-
children: /* @__PURE__ */ (0,
|
|
620
|
-
|
|
755
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
756
|
+
import_react_aria_components10.TextArea,
|
|
621
757
|
{
|
|
622
758
|
ref,
|
|
623
759
|
rows,
|
|
@@ -628,16 +764,16 @@ function TextArea({
|
|
|
628
764
|
)
|
|
629
765
|
}
|
|
630
766
|
),
|
|
631
|
-
description ? /* @__PURE__ */ (0,
|
|
632
|
-
/* @__PURE__ */ (0,
|
|
767
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
768
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
633
769
|
]
|
|
634
770
|
}
|
|
635
771
|
);
|
|
636
772
|
}
|
|
637
773
|
|
|
638
774
|
// src/components/forms/Select.tsx
|
|
639
|
-
var
|
|
640
|
-
var
|
|
775
|
+
var import_react_aria_components11 = require("react-aria-components");
|
|
776
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
641
777
|
var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
|
|
642
778
|
function Select({
|
|
643
779
|
label,
|
|
@@ -655,8 +791,8 @@ function Select({
|
|
|
655
791
|
...rest
|
|
656
792
|
}) {
|
|
657
793
|
const items = options.map(norm);
|
|
658
|
-
return /* @__PURE__ */ (0,
|
|
659
|
-
|
|
794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
795
|
+
import_react_aria_components11.Select,
|
|
660
796
|
{
|
|
661
797
|
className: cx("pire-field", className),
|
|
662
798
|
style,
|
|
@@ -667,78 +803,165 @@ function Select({
|
|
|
667
803
|
validationBehavior: "aria",
|
|
668
804
|
...rest,
|
|
669
805
|
children: [
|
|
670
|
-
label ? /* @__PURE__ */ (0,
|
|
806
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components11.Label, { className: "pire-field-label", children: [
|
|
671
807
|
label,
|
|
672
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
808
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
673
809
|
] }) : null,
|
|
674
|
-
/* @__PURE__ */ (0,
|
|
675
|
-
|
|
810
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
811
|
+
import_react_aria_components11.Button,
|
|
676
812
|
{
|
|
677
813
|
className: "pire-control",
|
|
678
814
|
"data-size": size,
|
|
679
815
|
"data-full-width": String(fullWidth),
|
|
680
816
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
681
817
|
children: [
|
|
682
|
-
/* @__PURE__ */ (0,
|
|
683
|
-
/* @__PURE__ */ (0,
|
|
818
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.SelectValue, { className: "pire-select-value" }),
|
|
819
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
|
|
684
820
|
]
|
|
685
821
|
}
|
|
686
822
|
),
|
|
687
|
-
description ? /* @__PURE__ */ (0,
|
|
688
|
-
/* @__PURE__ */ (0,
|
|
689
|
-
/* @__PURE__ */ (0,
|
|
823
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
824
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
825
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.ListBox, { className: "pire-listbox", items, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label }) }) })
|
|
690
826
|
]
|
|
691
827
|
}
|
|
692
828
|
);
|
|
693
829
|
}
|
|
694
830
|
|
|
695
831
|
// src/components/forms/Checkbox.tsx
|
|
696
|
-
var
|
|
697
|
-
var
|
|
832
|
+
var import_react_aria_components12 = require("react-aria-components");
|
|
833
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
698
834
|
function Checkbox({ label, hint, children, className, ...rest }) {
|
|
699
|
-
return /* @__PURE__ */ (0,
|
|
700
|
-
/* @__PURE__ */ (0,
|
|
701
|
-
/* @__PURE__ */ (0,
|
|
835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components12.Checkbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "check", size: 12 }) : null }),
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
|
|
702
838
|
label ?? children,
|
|
703
|
-
hint ? /* @__PURE__ */ (0,
|
|
839
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
704
840
|
] })
|
|
705
841
|
] }) });
|
|
706
842
|
}
|
|
707
843
|
|
|
708
844
|
// src/components/forms/Radio.tsx
|
|
709
|
-
var
|
|
710
|
-
var
|
|
845
|
+
var import_react_aria_components13 = require("react-aria-components");
|
|
846
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
711
847
|
function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
|
|
712
|
-
return /* @__PURE__ */ (0,
|
|
713
|
-
label ? /* @__PURE__ */ (0,
|
|
714
|
-
/* @__PURE__ */ (0,
|
|
715
|
-
description ? /* @__PURE__ */ (0,
|
|
716
|
-
/* @__PURE__ */ (0,
|
|
848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components13.RadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
|
|
849
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components13.Label, { className: "pire-field-label", children: label }) : null,
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pire-radiogroup", children }),
|
|
851
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components13.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
852
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components13.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
717
853
|
] });
|
|
718
854
|
}
|
|
719
855
|
function Radio({ label, hint, children, className, ...rest }) {
|
|
720
|
-
return /* @__PURE__ */ (0,
|
|
721
|
-
/* @__PURE__ */ (0,
|
|
722
|
-
/* @__PURE__ */ (0,
|
|
856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components13.Radio, { className: cx("pire-choice", className), ...rest, children: [
|
|
857
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
|
|
858
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
|
|
723
859
|
label ?? children,
|
|
724
|
-
hint ? /* @__PURE__ */ (0,
|
|
860
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
725
861
|
] })
|
|
726
862
|
] });
|
|
727
863
|
}
|
|
728
864
|
|
|
729
865
|
// src/components/forms/Switch.tsx
|
|
730
|
-
var
|
|
731
|
-
var
|
|
866
|
+
var import_react_aria_components14 = require("react-aria-components");
|
|
867
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
732
868
|
function Switch({ label, children, className, ...rest }) {
|
|
733
|
-
return /* @__PURE__ */ (0,
|
|
734
|
-
/* @__PURE__ */ (0,
|
|
735
|
-
/* @__PURE__ */ (0,
|
|
869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components14.Switch, { className: cx("pire-choice", className), ...rest, children: [
|
|
870
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-switch-thumb" }) }),
|
|
871
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: label ?? children })
|
|
736
872
|
] });
|
|
737
873
|
}
|
|
738
874
|
|
|
739
875
|
// src/components/forms/ComboBox.tsx
|
|
740
|
-
var
|
|
741
|
-
|
|
876
|
+
var import_react_aria_components15 = require("react-aria-components");
|
|
877
|
+
|
|
878
|
+
// src/i18n/PireIntlProvider.tsx
|
|
879
|
+
var React6 = __toESM(require("react"), 1);
|
|
880
|
+
|
|
881
|
+
// src/i18n/messages.ts
|
|
882
|
+
var enMessages = {
|
|
883
|
+
filterBarLabel: "Filters",
|
|
884
|
+
filterBarGo: "Go",
|
|
885
|
+
filterBarClearAll: "Clear all",
|
|
886
|
+
dataTableSelectAll: "Select all rows",
|
|
887
|
+
dataTableSelectRow: "Select row",
|
|
888
|
+
dataTableLoading: "Loading records",
|
|
889
|
+
dialogClose: "Close",
|
|
890
|
+
sidePanelClose: "Close panel",
|
|
891
|
+
inlineMessageDismiss: "Dismiss message",
|
|
892
|
+
toastDismiss: "Dismiss",
|
|
893
|
+
toastRegionLabel: "Notifications",
|
|
894
|
+
comboBoxShowSuggestions: "Show suggestions",
|
|
895
|
+
datePickerOpenCalendar: "Open calendar",
|
|
896
|
+
datePickerPreviousMonth: "Previous month",
|
|
897
|
+
datePickerNextMonth: "Next month",
|
|
898
|
+
numberFieldIncrease: "Increase",
|
|
899
|
+
numberFieldDecrease: "Decrease",
|
|
900
|
+
valueHelpFieldClear: "Clear selection",
|
|
901
|
+
valueHelpFieldOpenNamed: "Select {label}",
|
|
902
|
+
valueHelpFieldOpen: "Open value help",
|
|
903
|
+
valueHelpDialogSearch: "Search records",
|
|
904
|
+
valueHelpDialogCancel: "Cancel",
|
|
905
|
+
paginationLabel: "Pagination",
|
|
906
|
+
paginationRange: "{from}\u2013{to} of {total}",
|
|
907
|
+
paginationPageOf: "Page {page} of {pages}",
|
|
908
|
+
paginationPrevious: "Previous page",
|
|
909
|
+
paginationNext: "Next page",
|
|
910
|
+
paginationRowsPerPage: "Rows per page",
|
|
911
|
+
sideNavLabel: "Main navigation"
|
|
912
|
+
};
|
|
913
|
+
var esMessages = {
|
|
914
|
+
filterBarLabel: "Filtros",
|
|
915
|
+
filterBarGo: "Buscar",
|
|
916
|
+
filterBarClearAll: "Limpiar todo",
|
|
917
|
+
dataTableSelectAll: "Seleccionar todas las filas",
|
|
918
|
+
dataTableSelectRow: "Seleccionar fila",
|
|
919
|
+
dataTableLoading: "Cargando registros",
|
|
920
|
+
dialogClose: "Cerrar",
|
|
921
|
+
sidePanelClose: "Cerrar panel",
|
|
922
|
+
inlineMessageDismiss: "Descartar mensaje",
|
|
923
|
+
toastDismiss: "Descartar",
|
|
924
|
+
toastRegionLabel: "Notificaciones",
|
|
925
|
+
comboBoxShowSuggestions: "Mostrar sugerencias",
|
|
926
|
+
datePickerOpenCalendar: "Abrir calendario",
|
|
927
|
+
datePickerPreviousMonth: "Mes anterior",
|
|
928
|
+
datePickerNextMonth: "Mes siguiente",
|
|
929
|
+
numberFieldIncrease: "Aumentar",
|
|
930
|
+
numberFieldDecrease: "Disminuir",
|
|
931
|
+
valueHelpFieldClear: "Limpiar selecci\xF3n",
|
|
932
|
+
valueHelpFieldOpenNamed: "Seleccionar {label}",
|
|
933
|
+
valueHelpFieldOpen: "Abrir ayuda de valores",
|
|
934
|
+
valueHelpDialogSearch: "Buscar registros",
|
|
935
|
+
valueHelpDialogCancel: "Cancelar",
|
|
936
|
+
paginationLabel: "Paginaci\xF3n",
|
|
937
|
+
paginationRange: "{from}\u2013{to} de {total}",
|
|
938
|
+
paginationPageOf: "P\xE1gina {page} de {pages}",
|
|
939
|
+
paginationPrevious: "P\xE1gina anterior",
|
|
940
|
+
paginationNext: "P\xE1gina siguiente",
|
|
941
|
+
paginationRowsPerPage: "Filas por p\xE1gina",
|
|
942
|
+
sideNavLabel: "Navegaci\xF3n principal"
|
|
943
|
+
};
|
|
944
|
+
|
|
945
|
+
// src/i18n/PireIntlProvider.tsx
|
|
946
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
947
|
+
var MessagesContext = React6.createContext(enMessages);
|
|
948
|
+
function PireIntlProvider({ messages, children }) {
|
|
949
|
+
const value = React6.useMemo(
|
|
950
|
+
() => messages ? { ...enMessages, ...messages } : enMessages,
|
|
951
|
+
[messages]
|
|
952
|
+
);
|
|
953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MessagesContext.Provider, { value, children });
|
|
954
|
+
}
|
|
955
|
+
function usePireMessages() {
|
|
956
|
+
return React6.useContext(MessagesContext);
|
|
957
|
+
}
|
|
958
|
+
function useMessage(key, override) {
|
|
959
|
+
const messages = React6.useContext(MessagesContext);
|
|
960
|
+
return override ?? messages[key];
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
// src/components/forms/ComboBox.tsx
|
|
964
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
742
965
|
var norm2 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
743
966
|
function ComboBox({
|
|
744
967
|
label,
|
|
@@ -755,9 +978,10 @@ function ComboBox({
|
|
|
755
978
|
style,
|
|
756
979
|
...rest
|
|
757
980
|
}) {
|
|
981
|
+
const msg = usePireMessages();
|
|
758
982
|
const items = options.map(norm2);
|
|
759
|
-
return /* @__PURE__ */ (0,
|
|
760
|
-
|
|
983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
984
|
+
import_react_aria_components15.ComboBox,
|
|
761
985
|
{
|
|
762
986
|
className: cx("pire-field", className),
|
|
763
987
|
style,
|
|
@@ -770,29 +994,29 @@ function ComboBox({
|
|
|
770
994
|
validationBehavior: "aria",
|
|
771
995
|
...rest,
|
|
772
996
|
children: [
|
|
773
|
-
label ? /* @__PURE__ */ (0,
|
|
997
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components15.Label, { className: "pire-field-label", children: [
|
|
774
998
|
label,
|
|
775
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
999
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
776
1000
|
] }) : null,
|
|
777
|
-
/* @__PURE__ */ (0,
|
|
778
|
-
|
|
1001
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1002
|
+
import_react_aria_components15.Group,
|
|
779
1003
|
{
|
|
780
1004
|
className: "pire-control",
|
|
781
1005
|
"data-size": size,
|
|
782
1006
|
"data-full-width": String(fullWidth),
|
|
783
1007
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
784
1008
|
children: [
|
|
785
|
-
/* @__PURE__ */ (0,
|
|
786
|
-
/* @__PURE__ */ (0,
|
|
787
|
-
/* @__PURE__ */ (0,
|
|
1009
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
|
|
1010
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components15.Input, { className: "pire-input", placeholder: rest.placeholder }),
|
|
1011
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components15.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "chevron-down", size: 16 }) })
|
|
788
1012
|
]
|
|
789
1013
|
}
|
|
790
1014
|
),
|
|
791
|
-
description ? /* @__PURE__ */ (0,
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
793
|
-
/* @__PURE__ */ (0,
|
|
794
|
-
/* @__PURE__ */ (0,
|
|
795
|
-
item.secondary ? /* @__PURE__ */ (0,
|
|
1015
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components15.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1016
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components15.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
1017
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components15.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components15.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components15.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
|
|
1018
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { flex: 1 }, children: item.label }),
|
|
1019
|
+
item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
|
|
796
1020
|
] }) }) })
|
|
797
1021
|
]
|
|
798
1022
|
}
|
|
@@ -800,9 +1024,9 @@ function ComboBox({
|
|
|
800
1024
|
}
|
|
801
1025
|
|
|
802
1026
|
// src/components/forms/MultiComboBox.tsx
|
|
803
|
-
var
|
|
804
|
-
var
|
|
805
|
-
var
|
|
1027
|
+
var React7 = __toESM(require("react"), 1);
|
|
1028
|
+
var import_react_aria_components16 = require("react-aria-components");
|
|
1029
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
806
1030
|
var norm3 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
807
1031
|
function MultiComboBox({
|
|
808
1032
|
label,
|
|
@@ -820,13 +1044,14 @@ function MultiComboBox({
|
|
|
820
1044
|
style,
|
|
821
1045
|
...rest
|
|
822
1046
|
}) {
|
|
823
|
-
const
|
|
824
|
-
const
|
|
825
|
-
const [
|
|
826
|
-
const
|
|
1047
|
+
const msg = usePireMessages();
|
|
1048
|
+
const items = React7.useMemo(() => options.map(norm3), [options]);
|
|
1049
|
+
const [uncontrolled, setUncontrolled] = React7.useState(defaultValue ?? []);
|
|
1050
|
+
const [announcement, setAnnouncement] = React7.useState("");
|
|
1051
|
+
const inputRef = React7.useRef(null);
|
|
827
1052
|
const raw = value ?? uncontrolled;
|
|
828
1053
|
const contentKey = raw.join("\0");
|
|
829
|
-
const values =
|
|
1054
|
+
const values = React7.useMemo(() => raw, [contentKey]);
|
|
830
1055
|
const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
|
|
831
1056
|
const isEditable = !rest.isDisabled && !rest.isReadOnly;
|
|
832
1057
|
const commit = (next) => {
|
|
@@ -859,8 +1084,8 @@ function MultiComboBox({
|
|
|
859
1084
|
e.stopPropagation();
|
|
860
1085
|
if (!values.includes(next)) commit([...values, next]);
|
|
861
1086
|
};
|
|
862
|
-
return /* @__PURE__ */ (0,
|
|
863
|
-
|
|
1087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1088
|
+
import_react_aria_components16.ComboBox,
|
|
864
1089
|
{
|
|
865
1090
|
className: cx("pire-field", className),
|
|
866
1091
|
style,
|
|
@@ -873,12 +1098,12 @@ function MultiComboBox({
|
|
|
873
1098
|
validationBehavior: "aria",
|
|
874
1099
|
...rest,
|
|
875
1100
|
children: [
|
|
876
|
-
label ? /* @__PURE__ */ (0,
|
|
1101
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_aria_components16.Label, { className: "pire-field-label", children: [
|
|
877
1102
|
label,
|
|
878
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
1103
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
879
1104
|
] }) : null,
|
|
880
|
-
/* @__PURE__ */ (0,
|
|
881
|
-
|
|
1105
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1106
|
+
import_react_aria_components16.Group,
|
|
882
1107
|
{
|
|
883
1108
|
className: "pire-control",
|
|
884
1109
|
"data-size": size,
|
|
@@ -887,15 +1112,15 @@ function MultiComboBox({
|
|
|
887
1112
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
888
1113
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
889
1114
|
children: [
|
|
890
|
-
/* @__PURE__ */ (0,
|
|
891
|
-
/* @__PURE__ */ (0,
|
|
892
|
-
/* @__PURE__ */ (0,
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "pire-chipfield", children: [
|
|
1117
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.ButtonContext.Provider, { value: null, children: values.map((v) => (
|
|
893
1118
|
/* Disabled follows the field, not `isEditable`: a read-only field's chips are
|
|
894
1119
|
real, current values and should read as such — they simply lose the × . */
|
|
895
|
-
/* @__PURE__ */ (0,
|
|
1120
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tag, { isDisabled: rest.isDisabled, onRemove: isEditable ? () => remove(v) : void 0, children: labelOf(v) }, v)
|
|
896
1121
|
)) }),
|
|
897
|
-
/* @__PURE__ */ (0,
|
|
898
|
-
|
|
1122
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1123
|
+
import_react_aria_components16.Input,
|
|
899
1124
|
{
|
|
900
1125
|
ref: inputRef,
|
|
901
1126
|
className: cx("pire-input", "pire-chipinput"),
|
|
@@ -904,16 +1129,16 @@ function MultiComboBox({
|
|
|
904
1129
|
}
|
|
905
1130
|
)
|
|
906
1131
|
] }),
|
|
907
|
-
/* @__PURE__ */ (0,
|
|
1132
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "chevron-down", size: 16 }) })
|
|
908
1133
|
]
|
|
909
1134
|
}
|
|
910
1135
|
),
|
|
911
|
-
/* @__PURE__ */ (0,
|
|
912
|
-
description ? /* @__PURE__ */ (0,
|
|
913
|
-
/* @__PURE__ */ (0,
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
915
|
-
/* @__PURE__ */ (0,
|
|
916
|
-
item.secondary ? /* @__PURE__ */ (0,
|
|
1136
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-live": "polite", children: announcement }) }),
|
|
1137
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1138
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components16.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_aria_components16.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
|
|
1140
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { flex: 1 }, children: item.label }),
|
|
1141
|
+
item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
|
|
917
1142
|
] }) }) })
|
|
918
1143
|
]
|
|
919
1144
|
}
|
|
@@ -921,8 +1146,8 @@ function MultiComboBox({
|
|
|
921
1146
|
}
|
|
922
1147
|
|
|
923
1148
|
// src/components/forms/NumberField.tsx
|
|
924
|
-
var
|
|
925
|
-
var
|
|
1149
|
+
var import_react_aria_components17 = require("react-aria-components");
|
|
1150
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
926
1151
|
function NumberField({
|
|
927
1152
|
label,
|
|
928
1153
|
suffix,
|
|
@@ -935,13 +1160,14 @@ function NumberField({
|
|
|
935
1160
|
style,
|
|
936
1161
|
...rest
|
|
937
1162
|
}) {
|
|
938
|
-
|
|
939
|
-
|
|
1163
|
+
const msg = usePireMessages();
|
|
1164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_aria_components17.NumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
|
|
1165
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_aria_components17.Label, { className: "pire-field-label", children: [
|
|
940
1166
|
label,
|
|
941
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
1167
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
942
1168
|
] }) : null,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
944
|
-
|
|
1169
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1170
|
+
import_react_aria_components17.Group,
|
|
945
1171
|
{
|
|
946
1172
|
className: "pire-control",
|
|
947
1173
|
"data-size": size,
|
|
@@ -949,23 +1175,23 @@ function NumberField({
|
|
|
949
1175
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
950
1176
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
951
1177
|
children: [
|
|
952
|
-
/* @__PURE__ */ (0,
|
|
953
|
-
suffix ? /* @__PURE__ */ (0,
|
|
954
|
-
hideStepper ? null : /* @__PURE__ */ (0,
|
|
955
|
-
/* @__PURE__ */ (0,
|
|
956
|
-
/* @__PURE__ */ (0,
|
|
1178
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components17.Input, { className: "pire-input", "data-numeric": "true" }),
|
|
1179
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pire-affix", children: suffix }) : null,
|
|
1180
|
+
hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "pire-stepper", children: [
|
|
1181
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components17.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "plus", size: 10 }) }),
|
|
1182
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components17.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "minus", size: 10 }) })
|
|
957
1183
|
] })
|
|
958
1184
|
]
|
|
959
1185
|
}
|
|
960
1186
|
),
|
|
961
|
-
description ? /* @__PURE__ */ (0,
|
|
962
|
-
/* @__PURE__ */ (0,
|
|
1187
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components17.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1188
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components17.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
963
1189
|
] });
|
|
964
1190
|
}
|
|
965
1191
|
|
|
966
1192
|
// src/components/forms/DatePicker.tsx
|
|
967
|
-
var
|
|
968
|
-
var
|
|
1193
|
+
var import_react_aria_components18 = require("react-aria-components");
|
|
1194
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
969
1195
|
function DatePicker({
|
|
970
1196
|
label,
|
|
971
1197
|
description,
|
|
@@ -976,13 +1202,14 @@ function DatePicker({
|
|
|
976
1202
|
style,
|
|
977
1203
|
...rest
|
|
978
1204
|
}) {
|
|
979
|
-
|
|
980
|
-
|
|
1205
|
+
const msg = usePireMessages();
|
|
1206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components18.DatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
|
|
1207
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components18.Label, { className: "pire-field-label", children: [
|
|
981
1208
|
label,
|
|
982
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
1209
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
983
1210
|
] }) : null,
|
|
984
|
-
/* @__PURE__ */ (0,
|
|
985
|
-
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1212
|
+
import_react_aria_components18.Group,
|
|
986
1213
|
{
|
|
987
1214
|
className: "pire-control",
|
|
988
1215
|
"data-size": size,
|
|
@@ -990,36 +1217,36 @@ function DatePicker({
|
|
|
990
1217
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
991
1218
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
992
1219
|
children: [
|
|
993
|
-
/* @__PURE__ */ (0,
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.DateSegment, { segment, className: "pire-datesegment" }) }),
|
|
1221
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "calendar", size: 16 }) })
|
|
995
1222
|
]
|
|
996
1223
|
}
|
|
997
1224
|
),
|
|
998
|
-
description ? /* @__PURE__ */ (0,
|
|
999
|
-
/* @__PURE__ */ (0,
|
|
1000
|
-
/* @__PURE__ */ (0,
|
|
1001
|
-
/* @__PURE__ */ (0,
|
|
1002
|
-
/* @__PURE__ */ (0,
|
|
1003
|
-
/* @__PURE__ */ (0,
|
|
1004
|
-
/* @__PURE__ */ (0,
|
|
1225
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1226
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
1227
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components18.Calendar, { className: "pire-calendar", children: [
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "pire-calendar-head", children: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Button, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "chevron-left", size: 16 }) }),
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Heading, { className: "pire-calendar-title" }),
|
|
1231
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.Button, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "chevron-right", size: 16 }) })
|
|
1005
1232
|
] }),
|
|
1006
|
-
/* @__PURE__ */ (0,
|
|
1007
|
-
/* @__PURE__ */ (0,
|
|
1008
|
-
/* @__PURE__ */ (0,
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components18.CalendarGrid, { className: "pire-calendar-grid", children: [
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.CalendarHeaderCell, { children: day }) }),
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components18.CalendarCell, { date, className: "pire-calendar-cell" }) })
|
|
1009
1236
|
] })
|
|
1010
1237
|
] }) }) })
|
|
1011
1238
|
] });
|
|
1012
1239
|
}
|
|
1013
1240
|
|
|
1014
1241
|
// src/components/forms/ValueHelpField.tsx
|
|
1015
|
-
var
|
|
1242
|
+
var React9 = __toESM(require("react"), 1);
|
|
1016
1243
|
|
|
1017
1244
|
// src/components/patterns/ValueHelpDialog.tsx
|
|
1018
|
-
var
|
|
1245
|
+
var React8 = __toESM(require("react"), 1);
|
|
1019
1246
|
|
|
1020
1247
|
// src/components/feedback/Dialog.tsx
|
|
1021
|
-
var
|
|
1022
|
-
var
|
|
1248
|
+
var import_react_aria_components19 = require("react-aria-components");
|
|
1249
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1023
1250
|
function Dialog({
|
|
1024
1251
|
isOpen,
|
|
1025
1252
|
onOpenChange,
|
|
@@ -1034,12 +1261,13 @@ function Dialog({
|
|
|
1034
1261
|
className,
|
|
1035
1262
|
style
|
|
1036
1263
|
}) {
|
|
1264
|
+
const msg = usePireMessages();
|
|
1037
1265
|
const close = () => {
|
|
1038
1266
|
onClose?.();
|
|
1039
1267
|
onOpenChange?.(false);
|
|
1040
1268
|
};
|
|
1041
|
-
return /* @__PURE__ */ (0,
|
|
1042
|
-
|
|
1269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1270
|
+
import_react_aria_components19.ModalOverlay,
|
|
1043
1271
|
{
|
|
1044
1272
|
className: "pire-modal-overlay",
|
|
1045
1273
|
isOpen,
|
|
@@ -1047,24 +1275,71 @@ function Dialog({
|
|
|
1047
1275
|
onOpenChange: (o) => {
|
|
1048
1276
|
if (!o) close();
|
|
1049
1277
|
},
|
|
1050
|
-
children: /* @__PURE__ */ (0,
|
|
1051
|
-
title ? /* @__PURE__ */ (0,
|
|
1052
|
-
/* @__PURE__ */ (0,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1054
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
1278
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components19.Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components19.Dialog, { className: "pire-dialog", children: [
|
|
1279
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("header", { className: "pire-dialog-head", children: [
|
|
1280
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components19.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
|
|
1282
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
|
|
1055
1283
|
] }),
|
|
1056
|
-
showClose ? /* @__PURE__ */ (0,
|
|
1284
|
+
showClose ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { icon: "x", label: msg.dialogClose, size: "sm", onPress: close }) : null
|
|
1057
1285
|
] }) : null,
|
|
1058
|
-
/* @__PURE__ */ (0,
|
|
1059
|
-
footer ? /* @__PURE__ */ (0,
|
|
1286
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pire-dialog-body", children }),
|
|
1287
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
1060
1288
|
] }) })
|
|
1061
1289
|
}
|
|
1062
1290
|
);
|
|
1063
1291
|
}
|
|
1064
1292
|
|
|
1065
1293
|
// src/components/data/DataTable.tsx
|
|
1066
|
-
var
|
|
1067
|
-
|
|
1294
|
+
var import_react_aria_components20 = require("react-aria-components");
|
|
1295
|
+
|
|
1296
|
+
// src/components/feedback/Skeleton.tsx
|
|
1297
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1298
|
+
function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
|
|
1299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1300
|
+
"div",
|
|
1301
|
+
{
|
|
1302
|
+
className: cx("pire-skeleton", className),
|
|
1303
|
+
"data-shape": shape,
|
|
1304
|
+
"aria-hidden": "true",
|
|
1305
|
+
style: { width, height, ...style },
|
|
1306
|
+
...rest
|
|
1307
|
+
}
|
|
1308
|
+
);
|
|
1309
|
+
}
|
|
1310
|
+
var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
|
|
1311
|
+
function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
|
|
1312
|
+
const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
|
|
1313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1314
|
+
"div",
|
|
1315
|
+
{
|
|
1316
|
+
className: cx("pire-skeleton-row", className),
|
|
1317
|
+
"data-density": density,
|
|
1318
|
+
"aria-hidden": "true",
|
|
1319
|
+
style,
|
|
1320
|
+
...rest,
|
|
1321
|
+
children: cells.map((c, i) => {
|
|
1322
|
+
const align = c.numeric ? "right" : c.align ?? "left";
|
|
1323
|
+
return (
|
|
1324
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1326
|
+
"div",
|
|
1327
|
+
{
|
|
1328
|
+
className: "pire-skeleton-cell",
|
|
1329
|
+
"data-align": align,
|
|
1330
|
+
style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
|
|
1331
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
|
|
1332
|
+
},
|
|
1333
|
+
i
|
|
1334
|
+
)
|
|
1335
|
+
);
|
|
1336
|
+
})
|
|
1337
|
+
}
|
|
1338
|
+
);
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
// src/components/data/DataTable.tsx
|
|
1342
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1068
1343
|
function DataTable({
|
|
1069
1344
|
columns,
|
|
1070
1345
|
rows,
|
|
@@ -1077,79 +1352,104 @@ function DataTable({
|
|
|
1077
1352
|
onRowAction,
|
|
1078
1353
|
stickyHeader = true,
|
|
1079
1354
|
emptyLabel = "No records match the current filters.",
|
|
1355
|
+
isLoading,
|
|
1356
|
+
loadingRowCount,
|
|
1357
|
+
loadingLabel,
|
|
1080
1358
|
className,
|
|
1081
1359
|
style,
|
|
1082
1360
|
...rest
|
|
1083
1361
|
}) {
|
|
1362
|
+
const msg = usePireMessages();
|
|
1084
1363
|
const sortDescriptor = sort ? { column: sort.key, direction: sort.dir === "asc" ? "ascending" : "descending" } : void 0;
|
|
1085
1364
|
const handleSelection = (keys) => {
|
|
1086
1365
|
if (keys === "all") return onSelectionChange?.(rows.map((r) => r.id));
|
|
1087
1366
|
onSelectionChange?.([...keys]);
|
|
1088
1367
|
};
|
|
1089
|
-
|
|
1090
|
-
|
|
1368
|
+
const skeletonRows = loadingRowCount ?? (rows.length || 5);
|
|
1369
|
+
const skeletonColumns = [
|
|
1370
|
+
...selectable ? [{ width: 44 }] : [],
|
|
1371
|
+
...columns.map((c) => ({ width: c.width, align: c.align, numeric: c.numeric }))
|
|
1372
|
+
];
|
|
1373
|
+
const body = isLoading ? [] : rows;
|
|
1374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1375
|
+
"div",
|
|
1091
1376
|
{
|
|
1092
|
-
className: "pire-table",
|
|
1093
|
-
|
|
1094
|
-
"data-
|
|
1095
|
-
"aria-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1377
|
+
className: cx("pire-table-wrap", className),
|
|
1378
|
+
style,
|
|
1379
|
+
"data-loading": isLoading ? "true" : void 0,
|
|
1380
|
+
"aria-busy": isLoading ? "true" : void 0,
|
|
1381
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1382
|
+
import_react_aria_components20.Table,
|
|
1383
|
+
{
|
|
1384
|
+
className: "pire-table",
|
|
1385
|
+
"data-density": density,
|
|
1386
|
+
"data-sticky": String(stickyHeader),
|
|
1387
|
+
"aria-label": rest["aria-label"],
|
|
1388
|
+
selectionMode: selectable ? "multiple" : "none",
|
|
1389
|
+
selectedKeys: selected ? new Set(selected) : void 0,
|
|
1390
|
+
onSelectionChange: handleSelection,
|
|
1391
|
+
sortDescriptor,
|
|
1392
|
+
onSortChange: (d) => onSortChange?.({ key: String(d.column), dir: d.direction === "ascending" ? "asc" : "desc" }),
|
|
1393
|
+
onRowAction: onRowAction ? (key) => {
|
|
1394
|
+
const row = rows.find((r) => String(r.id) === String(key));
|
|
1395
|
+
if (row) onRowAction(row);
|
|
1396
|
+
} : void 0,
|
|
1397
|
+
children: [
|
|
1398
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_aria_components20.TableHeader, { className: "pire-thead-row", children: [
|
|
1399
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectAll }) }) : null,
|
|
1400
|
+
columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1401
|
+
import_react_aria_components20.Column,
|
|
1402
|
+
{
|
|
1403
|
+
id: c.key,
|
|
1404
|
+
className: "pire-th",
|
|
1405
|
+
isRowHeader: i === 0 && !selectable,
|
|
1406
|
+
allowsSorting: c.sortable,
|
|
1407
|
+
width: c.width,
|
|
1408
|
+
"data-align": c.numeric || c.align === "right" ? "right" : c.align,
|
|
1409
|
+
"data-allows-sorting": c.sortable ? "true" : void 0,
|
|
1410
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "pire-th-inner", children: [
|
|
1411
|
+
c.label,
|
|
1412
|
+
c.sortable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1413
|
+
Icon,
|
|
1414
|
+
{
|
|
1415
|
+
size: 12,
|
|
1416
|
+
name: sort?.key === c.key ? sort.dir === "asc" ? "arrow-up" : "arrow-down" : "chevrons-up-down",
|
|
1417
|
+
style: { color: sort?.key === c.key ? "var(--accent-subtle-fg)" : "var(--text-tertiary)" }
|
|
1418
|
+
}
|
|
1419
|
+
) : null
|
|
1420
|
+
] })
|
|
1421
|
+
},
|
|
1422
|
+
c.key
|
|
1423
|
+
))
|
|
1424
|
+
] }),
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.TableBody, { renderEmptyState: () => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pire-table-loading", role: "status", "aria-live": "polite", children: [
|
|
1426
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pire-sr-only", children: loadingLabel ?? msg.dataTableLoading }),
|
|
1427
|
+
Array.from({ length: skeletonRows }, (_, i) => (
|
|
1428
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows are positional.
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonTableRow, { columns: skeletonColumns, density }, i)
|
|
1430
|
+
))
|
|
1431
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pire-table-empty", children: emptyLabel }), children: body.map((row) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_aria_components20.Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
|
|
1432
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Cell, { className: "pire-td", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
|
|
1433
|
+
columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1434
|
+
import_react_aria_components20.Cell,
|
|
1435
|
+
{
|
|
1436
|
+
className: "pire-td",
|
|
1437
|
+
"data-numeric": c.numeric ? "true" : void 0,
|
|
1438
|
+
style: { textAlign: c.align && !c.numeric ? c.align : void 0 },
|
|
1439
|
+
children: c.render ? c.render(row) : row[c.key]
|
|
1440
|
+
},
|
|
1441
|
+
c.key
|
|
1442
|
+
))
|
|
1443
|
+
] }, row.id)) })
|
|
1444
|
+
]
|
|
1445
|
+
}
|
|
1446
|
+
)
|
|
1147
1447
|
}
|
|
1148
|
-
)
|
|
1448
|
+
);
|
|
1149
1449
|
}
|
|
1150
1450
|
|
|
1151
1451
|
// src/components/patterns/ValueHelpDialog.tsx
|
|
1152
|
-
var
|
|
1452
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1153
1453
|
function ValueHelpDialog({
|
|
1154
1454
|
isOpen,
|
|
1155
1455
|
title = "Select a record",
|
|
@@ -1160,28 +1460,29 @@ function ValueHelpDialog({
|
|
|
1160
1460
|
onSelect,
|
|
1161
1461
|
onClose
|
|
1162
1462
|
}) {
|
|
1163
|
-
const
|
|
1164
|
-
|
|
1463
|
+
const msg = usePireMessages();
|
|
1464
|
+
const [query, setQuery] = React8.useState("");
|
|
1465
|
+
React8.useEffect(() => {
|
|
1165
1466
|
if (isOpen) setQuery("");
|
|
1166
1467
|
}, [isOpen]);
|
|
1167
|
-
const filtered =
|
|
1468
|
+
const filtered = React8.useMemo(() => {
|
|
1168
1469
|
const q = query.trim().toLowerCase();
|
|
1169
1470
|
if (!q) return rows;
|
|
1170
1471
|
return rows.filter((row) => Object.values(row).some((v) => String(v).toLowerCase().includes(q)));
|
|
1171
1472
|
}, [rows, query]);
|
|
1172
|
-
return /* @__PURE__ */ (0,
|
|
1473
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1173
1474
|
Dialog,
|
|
1174
1475
|
{
|
|
1175
1476
|
isOpen,
|
|
1176
1477
|
size: "lg",
|
|
1177
1478
|
title,
|
|
1178
1479
|
onClose,
|
|
1179
|
-
footer: /* @__PURE__ */ (0,
|
|
1180
|
-
children: /* @__PURE__ */ (0,
|
|
1181
|
-
/* @__PURE__ */ (0,
|
|
1480
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { variant: "tertiary", onPress: onClose, children: msg.valueHelpDialogCancel }),
|
|
1481
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
|
|
1482
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1182
1483
|
Input,
|
|
1183
1484
|
{
|
|
1184
|
-
"aria-label":
|
|
1485
|
+
"aria-label": msg.valueHelpDialogSearch,
|
|
1185
1486
|
icon: "search",
|
|
1186
1487
|
type: "search",
|
|
1187
1488
|
value: query,
|
|
@@ -1190,7 +1491,7 @@ function ValueHelpDialog({
|
|
|
1190
1491
|
autoFocus: true
|
|
1191
1492
|
}
|
|
1192
1493
|
),
|
|
1193
|
-
/* @__PURE__ */ (0,
|
|
1494
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1194
1495
|
DataTable,
|
|
1195
1496
|
{
|
|
1196
1497
|
"aria-label": typeof title === "string" ? title : "Records",
|
|
@@ -1210,7 +1511,7 @@ function ValueHelpDialog({
|
|
|
1210
1511
|
}
|
|
1211
1512
|
|
|
1212
1513
|
// src/components/forms/ValueHelpField.tsx
|
|
1213
|
-
var
|
|
1514
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1214
1515
|
var defaultFormat = (row) => [row.id, row.name ?? row.label ?? row.text].filter(Boolean).join(" \u2014 ");
|
|
1215
1516
|
function ValueHelpField({
|
|
1216
1517
|
label,
|
|
@@ -1230,10 +1531,11 @@ function ValueHelpField({
|
|
|
1230
1531
|
className,
|
|
1231
1532
|
style
|
|
1232
1533
|
}) {
|
|
1233
|
-
const
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1534
|
+
const msg = usePireMessages();
|
|
1535
|
+
const [open, setOpen] = React9.useState(false);
|
|
1536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cx(className), style, children: [
|
|
1537
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1237
1539
|
Input,
|
|
1238
1540
|
{
|
|
1239
1541
|
label,
|
|
@@ -1247,28 +1549,28 @@ function ValueHelpField({
|
|
|
1247
1549
|
errorMessage
|
|
1248
1550
|
}
|
|
1249
1551
|
),
|
|
1250
|
-
allowsClear && value ? /* @__PURE__ */ (0,
|
|
1552
|
+
allowsClear && value ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1251
1553
|
IconButton,
|
|
1252
1554
|
{
|
|
1253
1555
|
icon: "x",
|
|
1254
|
-
label:
|
|
1556
|
+
label: msg.valueHelpFieldClear,
|
|
1255
1557
|
variant: "outlined",
|
|
1256
1558
|
isDisabled,
|
|
1257
1559
|
onPress: () => onChange?.(null)
|
|
1258
1560
|
}
|
|
1259
1561
|
) : null,
|
|
1260
|
-
/* @__PURE__ */ (0,
|
|
1562
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1261
1563
|
IconButton,
|
|
1262
1564
|
{
|
|
1263
1565
|
icon: "search",
|
|
1264
|
-
label: typeof label === "string" ?
|
|
1566
|
+
label: typeof label === "string" ? msg.valueHelpFieldOpenNamed.replace("{label}", label.toLowerCase()) : msg.valueHelpFieldOpen,
|
|
1265
1567
|
variant: "outlined",
|
|
1266
1568
|
isDisabled,
|
|
1267
1569
|
onPress: () => setOpen(true)
|
|
1268
1570
|
}
|
|
1269
1571
|
)
|
|
1270
1572
|
] }),
|
|
1271
|
-
/* @__PURE__ */ (0,
|
|
1573
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1272
1574
|
ValueHelpDialog,
|
|
1273
1575
|
{
|
|
1274
1576
|
isOpen: open,
|
|
@@ -1283,7 +1585,7 @@ function ValueHelpField({
|
|
|
1283
1585
|
}
|
|
1284
1586
|
|
|
1285
1587
|
// src/components/navigation/ShellBar.tsx
|
|
1286
|
-
var
|
|
1588
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1287
1589
|
var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
|
|
1288
1590
|
function ShellBar({
|
|
1289
1591
|
product,
|
|
@@ -1298,22 +1600,22 @@ function ShellBar({
|
|
|
1298
1600
|
className,
|
|
1299
1601
|
...rest
|
|
1300
1602
|
}) {
|
|
1301
|
-
return /* @__PURE__ */ (0,
|
|
1302
|
-
onMenu ? /* @__PURE__ */ (0,
|
|
1303
|
-
monogram ? /* @__PURE__ */ (0,
|
|
1304
|
-
product ? /* @__PURE__ */ (0,
|
|
1305
|
-
title ? /* @__PURE__ */ (0,
|
|
1306
|
-
/* @__PURE__ */ (0,
|
|
1307
|
-
onSearch ? /* @__PURE__ */ (0,
|
|
1603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: cx("pire-shellbar", className), ...rest, children: [
|
|
1604
|
+
onMenu ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
|
|
1605
|
+
monogram ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
|
|
1606
|
+
product ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-product", children: product }) : null,
|
|
1607
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-title", children: title }) : null,
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-spacer" }),
|
|
1609
|
+
onSearch ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
|
|
1308
1610
|
actions,
|
|
1309
|
-
user ? /* @__PURE__ */ (0,
|
|
1611
|
+
user ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
|
|
1310
1612
|
] });
|
|
1311
1613
|
}
|
|
1312
1614
|
|
|
1313
1615
|
// src/components/navigation/SideNav.tsx
|
|
1314
|
-
var
|
|
1315
|
-
var
|
|
1316
|
-
var
|
|
1616
|
+
var React10 = __toESM(require("react"), 1);
|
|
1617
|
+
var import_react_aria_components21 = require("react-aria-components");
|
|
1618
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1317
1619
|
function findActiveParent(groups, value) {
|
|
1318
1620
|
if (value == null) return void 0;
|
|
1319
1621
|
for (const group of groups) {
|
|
@@ -1335,12 +1637,13 @@ function SideNav({
|
|
|
1335
1637
|
className,
|
|
1336
1638
|
...rest
|
|
1337
1639
|
}) {
|
|
1640
|
+
const msg = usePireMessages();
|
|
1338
1641
|
const activeParent = findActiveParent(groups, value);
|
|
1339
1642
|
const isControlled = expandedIds != null;
|
|
1340
|
-
const [ownExpanded, setOwnExpanded] =
|
|
1643
|
+
const [ownExpanded, setOwnExpanded] = React10.useState(
|
|
1341
1644
|
() => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
|
|
1342
1645
|
);
|
|
1343
|
-
const [lastValue, setLastValue] =
|
|
1646
|
+
const [lastValue, setLastValue] = React10.useState(value);
|
|
1344
1647
|
if (value !== lastValue) {
|
|
1345
1648
|
setLastValue(value);
|
|
1346
1649
|
if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
|
|
@@ -1360,8 +1663,8 @@ function SideNav({
|
|
|
1360
1663
|
};
|
|
1361
1664
|
const renderRow = (item, onPress, isGroup) => {
|
|
1362
1665
|
const selected = !isGroup && item.id === value;
|
|
1363
|
-
const button = /* @__PURE__ */ (0,
|
|
1364
|
-
|
|
1666
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1667
|
+
import_react_aria_components21.Button,
|
|
1365
1668
|
{
|
|
1366
1669
|
className: "pire-sidenav-item",
|
|
1367
1670
|
"data-selected": selected ? "true" : void 0,
|
|
@@ -1370,55 +1673,55 @@ function SideNav({
|
|
|
1370
1673
|
"aria-label": collapsed ? item.label : void 0,
|
|
1371
1674
|
onPress,
|
|
1372
1675
|
children: [
|
|
1373
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
1374
|
-
collapsed ? null : /* @__PURE__ */ (0,
|
|
1375
|
-
item.count != null && !collapsed ? /* @__PURE__ */ (0,
|
|
1676
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: item.icon, size: 16 }) : null,
|
|
1677
|
+
collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: item.label }),
|
|
1678
|
+
item.count != null && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null
|
|
1376
1679
|
]
|
|
1377
1680
|
},
|
|
1378
1681
|
item.id
|
|
1379
1682
|
);
|
|
1380
|
-
return collapsed ? /* @__PURE__ */ (0,
|
|
1683
|
+
return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
|
|
1381
1684
|
};
|
|
1382
|
-
const renderSection = (item) => /* @__PURE__ */ (0,
|
|
1383
|
-
/* @__PURE__ */ (0,
|
|
1384
|
-
|
|
1685
|
+
const renderSection = (item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_aria_components21.Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
|
|
1686
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1687
|
+
import_react_aria_components21.Button,
|
|
1385
1688
|
{
|
|
1386
1689
|
slot: "trigger",
|
|
1387
1690
|
className: "pire-sidenav-item",
|
|
1388
1691
|
"data-kind": "group",
|
|
1389
1692
|
"data-active-child": item.id === activeParent ? "true" : void 0,
|
|
1390
1693
|
children: [
|
|
1391
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
1392
|
-
/* @__PURE__ */ (0,
|
|
1393
|
-
item.count != null ? /* @__PURE__ */ (0,
|
|
1394
|
-
/* @__PURE__ */ (0,
|
|
1694
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: item.icon, size: 16 }) : null,
|
|
1695
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: item.label }),
|
|
1696
|
+
item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null,
|
|
1697
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
|
|
1395
1698
|
]
|
|
1396
1699
|
}
|
|
1397
1700
|
),
|
|
1398
|
-
/* @__PURE__ */ (0,
|
|
1701
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria_components21.DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
|
|
1399
1702
|
const selected = child.id === value;
|
|
1400
|
-
return /* @__PURE__ */ (0,
|
|
1401
|
-
|
|
1703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1704
|
+
import_react_aria_components21.Button,
|
|
1402
1705
|
{
|
|
1403
1706
|
className: "pire-sidenav-item pire-sidenav-subitem",
|
|
1404
1707
|
"data-selected": selected ? "true" : void 0,
|
|
1405
1708
|
"aria-current": selected ? "page" : void 0,
|
|
1406
1709
|
onPress: () => onChange?.(child.id),
|
|
1407
1710
|
children: [
|
|
1408
|
-
/* @__PURE__ */ (0,
|
|
1409
|
-
child.count != null ? /* @__PURE__ */ (0,
|
|
1711
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: child.label }),
|
|
1712
|
+
child.count != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-sidenav-count", children: child.count }) : null
|
|
1410
1713
|
]
|
|
1411
1714
|
},
|
|
1412
1715
|
child.id
|
|
1413
1716
|
);
|
|
1414
1717
|
}) })
|
|
1415
1718
|
] }, item.id);
|
|
1416
|
-
return /* @__PURE__ */ (0,
|
|
1719
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1417
1720
|
"nav",
|
|
1418
1721
|
{
|
|
1419
1722
|
className: cx("pire-sidenav", className),
|
|
1420
1723
|
"data-collapsed": collapsed ? "true" : void 0,
|
|
1421
|
-
"aria-label":
|
|
1724
|
+
"aria-label": msg.sideNavLabel,
|
|
1422
1725
|
...rest,
|
|
1423
1726
|
children: [
|
|
1424
1727
|
groups.map((group, gi) => {
|
|
@@ -1428,10 +1731,10 @@ function SideNav({
|
|
|
1428
1731
|
if (isGroup && !collapsed) return renderSection(item);
|
|
1429
1732
|
return renderRow(item, () => isGroup ? toggleExpanded(item.id) : onChange?.(item.id), isGroup);
|
|
1430
1733
|
});
|
|
1431
|
-
return /* @__PURE__ */ (0,
|
|
1432
|
-
group.label && !collapsed ? /* @__PURE__ */ (0,
|
|
1433
|
-
hasSections ? /* @__PURE__ */ (0,
|
|
1434
|
-
|
|
1734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "pire-sidenav-group", children: [
|
|
1735
|
+
group.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-sidenav-label", children: group.label }) : null,
|
|
1736
|
+
hasSections ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1737
|
+
import_react_aria_components21.DisclosureGroup,
|
|
1435
1738
|
{
|
|
1436
1739
|
className: "pire-sidenav-tree",
|
|
1437
1740
|
allowsMultipleExpanded: true,
|
|
@@ -1442,18 +1745,18 @@ function SideNav({
|
|
|
1442
1745
|
) : rows
|
|
1443
1746
|
] }, group.label ?? gi);
|
|
1444
1747
|
}),
|
|
1445
|
-
footer ? /* @__PURE__ */ (0,
|
|
1748
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
|
|
1446
1749
|
]
|
|
1447
1750
|
}
|
|
1448
1751
|
);
|
|
1449
1752
|
}
|
|
1450
1753
|
|
|
1451
1754
|
// src/components/navigation/Tabs.tsx
|
|
1452
|
-
var
|
|
1453
|
-
var
|
|
1755
|
+
var import_react_aria_components22 = require("react-aria-components");
|
|
1756
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1454
1757
|
function Tabs({ items, value, defaultValue, onChange, panels, className, style, ...rest }) {
|
|
1455
|
-
return /* @__PURE__ */ (0,
|
|
1456
|
-
|
|
1758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1759
|
+
import_react_aria_components22.Tabs,
|
|
1457
1760
|
{
|
|
1458
1761
|
className,
|
|
1459
1762
|
style,
|
|
@@ -1461,23 +1764,23 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
|
|
|
1461
1764
|
defaultSelectedKey: defaultValue,
|
|
1462
1765
|
onSelectionChange: (k) => onChange?.(String(k)),
|
|
1463
1766
|
children: [
|
|
1464
|
-
/* @__PURE__ */ (0,
|
|
1465
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components22.TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_aria_components22.Tab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
|
|
1768
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: item.icon, size: 16 }) : null,
|
|
1466
1769
|
item.label,
|
|
1467
|
-
item.count != null ? /* @__PURE__ */ (0,
|
|
1770
|
+
item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-tab-count", children: item.count }) : null
|
|
1468
1771
|
] }) }),
|
|
1469
|
-
items.map((item) => /* @__PURE__ */ (0,
|
|
1772
|
+
items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components22.TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
|
|
1470
1773
|
]
|
|
1471
1774
|
}
|
|
1472
1775
|
);
|
|
1473
1776
|
}
|
|
1474
1777
|
|
|
1475
1778
|
// src/components/navigation/Breadcrumb.tsx
|
|
1476
|
-
var
|
|
1477
|
-
var
|
|
1779
|
+
var import_react_aria_components23 = require("react-aria-components");
|
|
1780
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1478
1781
|
function Breadcrumb({ items, onNavigate, className, style }) {
|
|
1479
|
-
return /* @__PURE__ */ (0,
|
|
1480
|
-
|
|
1782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1783
|
+
import_react_aria_components23.Breadcrumbs,
|
|
1481
1784
|
{
|
|
1482
1785
|
className: cx("pire-breadcrumbs", className),
|
|
1483
1786
|
style,
|
|
@@ -1485,9 +1788,9 @@ function Breadcrumb({ items, onNavigate, className, style }) {
|
|
|
1485
1788
|
onAction: (key) => onNavigate?.(String(key)),
|
|
1486
1789
|
children: (item) => {
|
|
1487
1790
|
const last = items[items.length - 1] === item;
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1489
|
-
last ? item.label : /* @__PURE__ */ (0,
|
|
1490
|
-
last ? null : /* @__PURE__ */ (0,
|
|
1791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_aria_components23.Breadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
|
|
1792
|
+
last ? item.label : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components23.Link, { href: item.href, children: item.label }),
|
|
1793
|
+
last ? null : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
|
|
1491
1794
|
] });
|
|
1492
1795
|
}
|
|
1493
1796
|
}
|
|
@@ -1495,7 +1798,7 @@ function Breadcrumb({ items, onNavigate, className, style }) {
|
|
|
1495
1798
|
}
|
|
1496
1799
|
|
|
1497
1800
|
// src/components/navigation/Pagination.tsx
|
|
1498
|
-
var
|
|
1801
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1499
1802
|
function Pagination({
|
|
1500
1803
|
page = 1,
|
|
1501
1804
|
pageSize = 25,
|
|
@@ -1506,49 +1809,39 @@ function Pagination({
|
|
|
1506
1809
|
className,
|
|
1507
1810
|
style
|
|
1508
1811
|
}) {
|
|
1812
|
+
const msg = usePireMessages();
|
|
1509
1813
|
const pages = Math.max(1, Math.ceil(total / pageSize));
|
|
1510
1814
|
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
|
|
1511
1815
|
const to = Math.min(total, page * pageSize);
|
|
1512
|
-
return /* @__PURE__ */ (0,
|
|
1513
|
-
/* @__PURE__ */ (0,
|
|
1514
|
-
|
|
1515
|
-
"\u2013",
|
|
1516
|
-
to.toLocaleString(),
|
|
1517
|
-
" of ",
|
|
1518
|
-
total.toLocaleString()
|
|
1519
|
-
] }),
|
|
1520
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("nav", { className: cx("pire-pagination", className), style, "aria-label": msg.paginationLabel, children: [
|
|
1817
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-pagination-count", children: msg.paginationRange.replace("{from}", from.toLocaleString()).replace("{to}", to.toLocaleString()).replace("{total}", total.toLocaleString()) }),
|
|
1818
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1521
1819
|
IconButton,
|
|
1522
1820
|
{
|
|
1523
1821
|
icon: "chevron-left",
|
|
1524
|
-
label:
|
|
1822
|
+
label: msg.paginationPrevious,
|
|
1525
1823
|
size: "sm",
|
|
1526
1824
|
variant: "outlined",
|
|
1527
1825
|
isDisabled: page <= 1,
|
|
1528
1826
|
onPress: () => onPageChange?.(page - 1)
|
|
1529
1827
|
}
|
|
1530
1828
|
),
|
|
1531
|
-
/* @__PURE__ */ (0,
|
|
1532
|
-
|
|
1533
|
-
page,
|
|
1534
|
-
" of ",
|
|
1535
|
-
pages
|
|
1536
|
-
] }),
|
|
1537
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1829
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-pagination-count", "aria-live": "polite", children: msg.paginationPageOf.replace("{page}", String(page)).replace("{pages}", String(pages)) }),
|
|
1830
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1538
1831
|
IconButton,
|
|
1539
1832
|
{
|
|
1540
1833
|
icon: "chevron-right",
|
|
1541
|
-
label:
|
|
1834
|
+
label: msg.paginationNext,
|
|
1542
1835
|
size: "sm",
|
|
1543
1836
|
variant: "outlined",
|
|
1544
1837
|
isDisabled: page >= pages,
|
|
1545
1838
|
onPress: () => onPageChange?.(page + 1)
|
|
1546
1839
|
}
|
|
1547
1840
|
),
|
|
1548
|
-
onPageSizeChange ? /* @__PURE__ */ (0,
|
|
1841
|
+
onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1549
1842
|
Select,
|
|
1550
1843
|
{
|
|
1551
|
-
"aria-label":
|
|
1844
|
+
"aria-label": msg.paginationRowsPerPage,
|
|
1552
1845
|
size: "sm",
|
|
1553
1846
|
fullWidth: false,
|
|
1554
1847
|
value: String(pageSize),
|
|
@@ -1560,8 +1853,59 @@ function Pagination({
|
|
|
1560
1853
|
] });
|
|
1561
1854
|
}
|
|
1562
1855
|
|
|
1856
|
+
// src/components/navigation/Menu.tsx
|
|
1857
|
+
var import_react_aria_components24 = require("react-aria-components");
|
|
1858
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1859
|
+
function Menu({ minWidth, className, style, ...rest }) {
|
|
1860
|
+
const width = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
|
|
1861
|
+
const menuStyle = width == null ? style : { ["--pire-menu-min-w"]: width, ...style };
|
|
1862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1863
|
+
import_react_aria_components24.Menu,
|
|
1864
|
+
{
|
|
1865
|
+
className: cx("pire-menu", className),
|
|
1866
|
+
style: menuStyle,
|
|
1867
|
+
...rest
|
|
1868
|
+
}
|
|
1869
|
+
);
|
|
1870
|
+
}
|
|
1871
|
+
function MenuItem({
|
|
1872
|
+
children,
|
|
1873
|
+
icon,
|
|
1874
|
+
description,
|
|
1875
|
+
shortcut,
|
|
1876
|
+
tone = "default",
|
|
1877
|
+
className,
|
|
1878
|
+
...rest
|
|
1879
|
+
}) {
|
|
1880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
1881
|
+
import_react_aria_components24.MenuItem,
|
|
1882
|
+
{
|
|
1883
|
+
className: cx("pire-menu-item", className),
|
|
1884
|
+
"data-tone": tone === "danger" ? "danger" : void 0,
|
|
1885
|
+
...rest,
|
|
1886
|
+
children: [
|
|
1887
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: icon, size: 16, className: "pire-menu-item-icon" }) : null,
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "pire-menu-item-body", children: [
|
|
1889
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-menu-item-label", children }),
|
|
1890
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-menu-item-desc", children: description }) : null
|
|
1891
|
+
] }),
|
|
1892
|
+
shortcut ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("kbd", { className: "pire-menu-item-shortcut", children: shortcut }) : null
|
|
1893
|
+
]
|
|
1894
|
+
}
|
|
1895
|
+
);
|
|
1896
|
+
}
|
|
1897
|
+
function MenuSection({ title, children, className, ...rest }) {
|
|
1898
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_aria_components24.MenuSection, { className: cx("pire-menu-section", className), ...rest, children: [
|
|
1899
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components24.Header, { className: "pire-menu-section-title", children: title }) : null,
|
|
1900
|
+
children
|
|
1901
|
+
] });
|
|
1902
|
+
}
|
|
1903
|
+
function MenuSeparator({ className }) {
|
|
1904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components24.Separator, { className: cx("pire-menu-separator", className) });
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1563
1907
|
// src/components/feedback/InlineMessage.tsx
|
|
1564
|
-
var
|
|
1908
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1565
1909
|
var KIND_ICON = {
|
|
1566
1910
|
info: "info",
|
|
1567
1911
|
success: "check-circle-2",
|
|
@@ -1569,8 +1913,9 @@ var KIND_ICON = {
|
|
|
1569
1913
|
error: "alert-octagon"
|
|
1570
1914
|
};
|
|
1571
1915
|
function InlineMessage({ kind = "info", title, action, onClose, children, className, ...rest }) {
|
|
1916
|
+
const msg = usePireMessages();
|
|
1572
1917
|
const assertive = kind === "error" || kind === "warning";
|
|
1573
|
-
return /* @__PURE__ */ (0,
|
|
1918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
1574
1919
|
"div",
|
|
1575
1920
|
{
|
|
1576
1921
|
className: cx("pire-msg", className),
|
|
@@ -1579,21 +1924,21 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
|
|
|
1579
1924
|
"aria-live": assertive ? "assertive" : "polite",
|
|
1580
1925
|
...rest,
|
|
1581
1926
|
children: [
|
|
1582
|
-
/* @__PURE__ */ (0,
|
|
1583
|
-
/* @__PURE__ */ (0,
|
|
1584
|
-
title ? /* @__PURE__ */ (0,
|
|
1585
|
-
children ? /* @__PURE__ */ (0,
|
|
1927
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
|
|
1929
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "pire-msg-title", children: title }) : null,
|
|
1930
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "pire-msg-body", children }) : null,
|
|
1586
1931
|
action
|
|
1587
1932
|
] }),
|
|
1588
|
-
onClose ? /* @__PURE__ */ (0,
|
|
1933
|
+
onClose ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconButton, { icon: "x", label: msg.inlineMessageDismiss, size: "sm", onPress: onClose }) : null
|
|
1589
1934
|
]
|
|
1590
1935
|
}
|
|
1591
1936
|
);
|
|
1592
1937
|
}
|
|
1593
1938
|
|
|
1594
1939
|
// src/components/feedback/ProgressBar.tsx
|
|
1595
|
-
var
|
|
1596
|
-
var
|
|
1940
|
+
var import_react_aria_components25 = require("react-aria-components");
|
|
1941
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1597
1942
|
function ProgressBar({
|
|
1598
1943
|
value = 0,
|
|
1599
1944
|
minValue = 0,
|
|
@@ -1606,8 +1951,8 @@ function ProgressBar({
|
|
|
1606
1951
|
className,
|
|
1607
1952
|
style
|
|
1608
1953
|
}) {
|
|
1609
|
-
return /* @__PURE__ */ (0,
|
|
1610
|
-
|
|
1954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1955
|
+
import_react_aria_components25.ProgressBar,
|
|
1611
1956
|
{
|
|
1612
1957
|
className: cx("pire-progress", className),
|
|
1613
1958
|
"data-status": status,
|
|
@@ -1617,20 +1962,20 @@ function ProgressBar({
|
|
|
1617
1962
|
maxValue,
|
|
1618
1963
|
isIndeterminate,
|
|
1619
1964
|
style,
|
|
1620
|
-
children: ({ percentage, valueText }) => /* @__PURE__ */ (0,
|
|
1621
|
-
label || showValue ? /* @__PURE__ */ (0,
|
|
1622
|
-
label ? /* @__PURE__ */ (0,
|
|
1623
|
-
showValue && !isIndeterminate ? /* @__PURE__ */ (0,
|
|
1965
|
+
children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
1966
|
+
label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "pire-progress-head", children: [
|
|
1967
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_aria_components25.Label, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", {}),
|
|
1968
|
+
showValue && !isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-numeric", children: valueText }) : null
|
|
1624
1969
|
] }) : null,
|
|
1625
|
-
/* @__PURE__ */ (0,
|
|
1970
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pire-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
|
|
1626
1971
|
] })
|
|
1627
1972
|
}
|
|
1628
1973
|
);
|
|
1629
1974
|
}
|
|
1630
1975
|
|
|
1631
1976
|
// src/components/feedback/Toast.tsx
|
|
1632
|
-
var
|
|
1633
|
-
var
|
|
1977
|
+
var React11 = __toESM(require("react"), 1);
|
|
1978
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1634
1979
|
var KIND_ICON2 = {
|
|
1635
1980
|
info: "info",
|
|
1636
1981
|
success: "check-circle-2",
|
|
@@ -1638,7 +1983,8 @@ var KIND_ICON2 = {
|
|
|
1638
1983
|
error: "alert-octagon"
|
|
1639
1984
|
};
|
|
1640
1985
|
function Toast({ kind = "success", onClose, position = "bottom-center", children, className, ...rest }) {
|
|
1641
|
-
|
|
1986
|
+
const msg = usePireMessages();
|
|
1987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
1642
1988
|
"div",
|
|
1643
1989
|
{
|
|
1644
1990
|
className: cx("pire-toast", className),
|
|
@@ -1647,84 +1993,40 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
|
|
|
1647
1993
|
"aria-live": kind === "error" ? "assertive" : "polite",
|
|
1648
1994
|
...rest,
|
|
1649
1995
|
children: [
|
|
1650
|
-
/* @__PURE__ */ (0,
|
|
1651
|
-
/* @__PURE__ */ (0,
|
|
1652
|
-
onClose ? /* @__PURE__ */ (0,
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: KIND_ICON2[kind], size: 16 }),
|
|
1997
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { flex: 1 }, children }),
|
|
1998
|
+
onClose ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconButton, { icon: "x", label: msg.toastDismiss, size: "sm", variant: "inverse", onPress: onClose }) : null
|
|
1653
1999
|
]
|
|
1654
2000
|
}
|
|
1655
2001
|
);
|
|
1656
2002
|
}
|
|
1657
|
-
var ToastContext =
|
|
2003
|
+
var ToastContext = React11.createContext(null);
|
|
1658
2004
|
function ToastProvider({ children, timeout = 6e3 }) {
|
|
1659
|
-
const
|
|
1660
|
-
const
|
|
1661
|
-
const
|
|
2005
|
+
const msg = usePireMessages();
|
|
2006
|
+
const [toasts, setToasts] = React11.useState([]);
|
|
2007
|
+
const close = React11.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
|
|
2008
|
+
const add = React11.useCallback((toast) => {
|
|
1662
2009
|
const id = Math.random().toString(36).slice(2);
|
|
1663
2010
|
setToasts((t) => [...t, { ...toast, id }]);
|
|
1664
2011
|
const ms = toast.timeout ?? timeout;
|
|
1665
2012
|
if (ms > 0) setTimeout(() => close(id), ms);
|
|
1666
2013
|
return id;
|
|
1667
2014
|
}, [close, timeout]);
|
|
1668
|
-
const value =
|
|
1669
|
-
return /* @__PURE__ */ (0,
|
|
2015
|
+
const value = React11.useMemo(() => ({ add, close }), [add, close]);
|
|
2016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ToastContext.Provider, { value, children: [
|
|
1670
2017
|
children,
|
|
1671
|
-
/* @__PURE__ */ (0,
|
|
2018
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
|
|
1672
2019
|
] });
|
|
1673
2020
|
}
|
|
1674
2021
|
function useToast() {
|
|
1675
|
-
const ctx =
|
|
2022
|
+
const ctx = React11.useContext(ToastContext);
|
|
1676
2023
|
if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
|
|
1677
2024
|
return ctx;
|
|
1678
2025
|
}
|
|
1679
2026
|
|
|
1680
|
-
// src/components/feedback/Skeleton.tsx
|
|
1681
|
-
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1682
|
-
function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
|
|
1683
|
-
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1684
|
-
"div",
|
|
1685
|
-
{
|
|
1686
|
-
className: cx("pire-skeleton", className),
|
|
1687
|
-
"data-shape": shape,
|
|
1688
|
-
"aria-hidden": "true",
|
|
1689
|
-
style: { width, height, ...style },
|
|
1690
|
-
...rest
|
|
1691
|
-
}
|
|
1692
|
-
);
|
|
1693
|
-
}
|
|
1694
|
-
var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
|
|
1695
|
-
function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
|
|
1696
|
-
const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
|
|
1697
|
-
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1698
|
-
"div",
|
|
1699
|
-
{
|
|
1700
|
-
className: cx("pire-skeleton-row", className),
|
|
1701
|
-
"data-density": density,
|
|
1702
|
-
"aria-hidden": "true",
|
|
1703
|
-
style,
|
|
1704
|
-
...rest,
|
|
1705
|
-
children: cells.map((c, i) => {
|
|
1706
|
-
const align = c.numeric ? "right" : c.align ?? "left";
|
|
1707
|
-
return (
|
|
1708
|
-
// biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
|
|
1709
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1710
|
-
"div",
|
|
1711
|
-
{
|
|
1712
|
-
className: "pire-skeleton-cell",
|
|
1713
|
-
"data-align": align,
|
|
1714
|
-
style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
|
|
1715
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
|
|
1716
|
-
},
|
|
1717
|
-
i
|
|
1718
|
-
)
|
|
1719
|
-
);
|
|
1720
|
-
})
|
|
1721
|
-
}
|
|
1722
|
-
);
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1725
2027
|
// src/components/data/KpiTile.tsx
|
|
1726
|
-
var
|
|
1727
|
-
var
|
|
2028
|
+
var import_react_aria_components26 = require("react-aria-components");
|
|
2029
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
1728
2030
|
function KpiTile({
|
|
1729
2031
|
label,
|
|
1730
2032
|
value,
|
|
@@ -1740,50 +2042,50 @@ function KpiTile({
|
|
|
1740
2042
|
style
|
|
1741
2043
|
}) {
|
|
1742
2044
|
const tone = deltaTone ?? (deltaDirection === "down" ? "negative" : "positive");
|
|
1743
|
-
const body = /* @__PURE__ */ (0,
|
|
1744
|
-
/* @__PURE__ */ (0,
|
|
1745
|
-
icon ? /* @__PURE__ */ (0,
|
|
2045
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
2046
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pire-kpi-label", children: [
|
|
2047
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: icon, size: 16 }) : null,
|
|
1746
2048
|
label
|
|
1747
2049
|
] }),
|
|
1748
|
-
/* @__PURE__ */ (0,
|
|
2050
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pire-kpi-value", children: [
|
|
1749
2051
|
value,
|
|
1750
|
-
unit ? /* @__PURE__ */ (0,
|
|
2052
|
+
unit ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "pire-kpi-unit", children: unit }) : null
|
|
1751
2053
|
] }),
|
|
1752
|
-
delta ? /* @__PURE__ */ (0,
|
|
1753
|
-
deltaDirection ? /* @__PURE__ */ (0,
|
|
2054
|
+
delta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
|
|
2055
|
+
deltaDirection ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
|
|
1754
2056
|
delta
|
|
1755
2057
|
] }) : null,
|
|
1756
|
-
footnote ? /* @__PURE__ */ (0,
|
|
2058
|
+
footnote ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "pire-kpi-foot", children: footnote }) : null
|
|
1757
2059
|
] });
|
|
1758
2060
|
const props = { className: cx("pire-kpi", className), "data-status": status, style };
|
|
1759
|
-
return onPress ? /* @__PURE__ */ (0,
|
|
2061
|
+
return onPress ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components26.Button, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...props, children: body });
|
|
1760
2062
|
}
|
|
1761
2063
|
|
|
1762
2064
|
// src/components/data/ObjectHeader.tsx
|
|
1763
|
-
var
|
|
2065
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
1764
2066
|
function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions, className, ...rest }) {
|
|
1765
|
-
return /* @__PURE__ */ (0,
|
|
2067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("header", { className: cx("pire-objheader", className), ...rest, children: [
|
|
1766
2068
|
breadcrumb,
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
subtitle || id ? /* @__PURE__ */ (0,
|
|
2069
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "pire-objheader-row", children: [
|
|
2070
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
2071
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h1", { className: "pire-objheader-title", children: title }),
|
|
2072
|
+
subtitle || id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "pire-objheader-sub", children: [
|
|
1771
2073
|
subtitle,
|
|
1772
|
-
id ? /* @__PURE__ */ (0,
|
|
2074
|
+
id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "pire-objheader-id", children: id }) : null
|
|
1773
2075
|
] }) : null
|
|
1774
2076
|
] }),
|
|
1775
2077
|
badge,
|
|
1776
|
-
actions ? /* @__PURE__ */ (0,
|
|
2078
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "pire-objheader-actions", children: actions }) : null
|
|
1777
2079
|
] }),
|
|
1778
|
-
facts?.length ? /* @__PURE__ */ (0,
|
|
1779
|
-
/* @__PURE__ */ (0,
|
|
1780
|
-
/* @__PURE__ */ (0,
|
|
2080
|
+
facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
|
|
2081
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dt", { className: "pire-fact-label", children: fact.label }),
|
|
2082
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dd", { className: "pire-fact-value", "data-numeric": fact.numeric ? "true" : void 0, style: { margin: 0 }, children: fact.value })
|
|
1781
2083
|
] }, fact.label)) }) : null
|
|
1782
2084
|
] });
|
|
1783
2085
|
}
|
|
1784
2086
|
|
|
1785
2087
|
// src/components/data/FilterBar.tsx
|
|
1786
|
-
var
|
|
2088
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
1787
2089
|
function FilterBar({
|
|
1788
2090
|
children,
|
|
1789
2091
|
activeFilters = [],
|
|
@@ -1792,118 +2094,144 @@ function FilterBar({
|
|
|
1792
2094
|
onGo,
|
|
1793
2095
|
resultLabel,
|
|
1794
2096
|
actions,
|
|
2097
|
+
goLabel,
|
|
2098
|
+
clearAllLabel,
|
|
1795
2099
|
className,
|
|
1796
2100
|
...rest
|
|
1797
2101
|
}) {
|
|
1798
|
-
|
|
1799
|
-
|
|
2102
|
+
const label = useMessage("filterBarLabel", rest["aria-label"]);
|
|
2103
|
+
const go = useMessage("filterBarGo", goLabel);
|
|
2104
|
+
const clearAll = useMessage("filterBarClearAll", clearAllLabel);
|
|
2105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("section", { className: cx("pire-filterbar", className), ...rest, "aria-label": label, children: [
|
|
2106
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pire-filterbar-controls", children: [
|
|
1800
2107
|
children,
|
|
1801
|
-
onGo ? /* @__PURE__ */ (0,
|
|
2108
|
+
onGo ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "primary", onPress: onGo, children: go }) : null
|
|
1802
2109
|
] }),
|
|
1803
|
-
activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0,
|
|
1804
|
-
activeFilters.map((filter) => /* @__PURE__ */ (0,
|
|
1805
|
-
activeFilters.length && onClear ? /* @__PURE__ */ (0,
|
|
1806
|
-
resultLabel ? /* @__PURE__ */ (0,
|
|
1807
|
-
actions ? /* @__PURE__ */ (0,
|
|
2110
|
+
activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pire-filterbar-foot", children: [
|
|
2111
|
+
activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
|
|
2112
|
+
activeFilters.length && onClear ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: clearAll }) : null,
|
|
2113
|
+
resultLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
|
|
2114
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-filterbar-actions", children: actions }) : null
|
|
1808
2115
|
] }) : null
|
|
1809
2116
|
] });
|
|
1810
2117
|
}
|
|
1811
2118
|
|
|
1812
2119
|
// src/components/data/DescriptionList.tsx
|
|
1813
|
-
var
|
|
2120
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
1814
2121
|
function DescriptionList({ items, layout = "rows", columns = 3, className, style, ...rest }) {
|
|
1815
|
-
return /* @__PURE__ */ (0,
|
|
2122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
1816
2123
|
"dl",
|
|
1817
2124
|
{
|
|
1818
2125
|
className: cx("pire-dl", className),
|
|
1819
2126
|
"data-layout": layout,
|
|
1820
2127
|
style: { ...layout === "grid" ? { "--pire-dl-cols": columns } : null, ...style },
|
|
1821
2128
|
...rest,
|
|
1822
|
-
children: items.map((item, i) => /* @__PURE__ */ (0,
|
|
1823
|
-
/* @__PURE__ */ (0,
|
|
2129
|
+
children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
|
|
2130
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("dt", { className: "pire-dl-term", children: [
|
|
1824
2131
|
item.label,
|
|
1825
2132
|
item.hint
|
|
1826
2133
|
] }),
|
|
1827
|
-
/* @__PURE__ */ (0,
|
|
2134
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("dd", { className: "pire-dl-value", "data-numeric": item.numeric ? "true" : void 0, children: item.value })
|
|
1828
2135
|
] }, i))
|
|
1829
2136
|
}
|
|
1830
2137
|
);
|
|
1831
2138
|
}
|
|
1832
2139
|
|
|
1833
2140
|
// src/components/data/Timeline.tsx
|
|
1834
|
-
var
|
|
2141
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
1835
2142
|
function Timeline({ entries, reverse = false, className, ...rest }) {
|
|
1836
2143
|
const list = reverse ? [...entries].reverse() : entries;
|
|
1837
|
-
return /* @__PURE__ */ (0,
|
|
1838
|
-
/* @__PURE__ */ (0,
|
|
1839
|
-
/* @__PURE__ */ (0,
|
|
1840
|
-
entry.actor ? /* @__PURE__ */ (0,
|
|
2144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "pire-timeline-item", children: [
|
|
2145
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "pire-timeline-time", children: entry.time }),
|
|
2146
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "pire-timeline-text", children: entry.event }),
|
|
2147
|
+
entry.actor ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "pire-timeline-actor", children: entry.actor }) : null
|
|
1841
2148
|
] }, entry.id ?? i)) });
|
|
1842
2149
|
}
|
|
1843
2150
|
|
|
1844
2151
|
// src/components/data/LinkList.tsx
|
|
1845
|
-
var
|
|
1846
|
-
var
|
|
2152
|
+
var import_react_aria_components27 = require("react-aria-components");
|
|
2153
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
1847
2154
|
function LinkList({ items, onSelect, className, ...rest }) {
|
|
1848
|
-
return /* @__PURE__ */ (0,
|
|
1849
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
1850
|
-
item.key ? /* @__PURE__ */ (0,
|
|
1851
|
-
item.text ? /* @__PURE__ */ (0,
|
|
2155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_aria_components27.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
|
|
2156
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
|
|
2157
|
+
item.key ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
|
|
2158
|
+
item.text ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
|
|
1852
2159
|
item.trailing
|
|
1853
2160
|
] }, item.id)) });
|
|
1854
2161
|
}
|
|
1855
2162
|
|
|
2163
|
+
// src/components/layout/PageBand.tsx
|
|
2164
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2165
|
+
function PageBand({
|
|
2166
|
+
surface = "card",
|
|
2167
|
+
hasBorder = true,
|
|
2168
|
+
children,
|
|
2169
|
+
className,
|
|
2170
|
+
...rest
|
|
2171
|
+
}) {
|
|
2172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2173
|
+
"div",
|
|
2174
|
+
{
|
|
2175
|
+
className: cx("pire-pageband", className),
|
|
2176
|
+
"data-surface": surface,
|
|
2177
|
+
"data-border": hasBorder ? "true" : void 0,
|
|
2178
|
+
...rest,
|
|
2179
|
+
children
|
|
2180
|
+
}
|
|
2181
|
+
);
|
|
2182
|
+
}
|
|
2183
|
+
|
|
1856
2184
|
// src/components/layout/PageHeader.tsx
|
|
1857
|
-
var
|
|
2185
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
1858
2186
|
function PageHeader({ title, subtitle, actions, className, ...rest }) {
|
|
1859
|
-
return /* @__PURE__ */ (0,
|
|
1860
|
-
/* @__PURE__ */ (0,
|
|
1861
|
-
/* @__PURE__ */ (0,
|
|
1862
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
2187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
|
|
2188
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
2189
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h1", { className: "pire-pageheader-title", children: title }),
|
|
2190
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
|
|
1863
2191
|
] }),
|
|
1864
|
-
actions ? /* @__PURE__ */ (0,
|
|
2192
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
|
|
1865
2193
|
] });
|
|
1866
2194
|
}
|
|
1867
2195
|
|
|
1868
2196
|
// src/components/layout/SectionHeader.tsx
|
|
1869
|
-
var
|
|
2197
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
1870
2198
|
function SectionHeader({ title, meta, actions, className, ...rest }) {
|
|
1871
|
-
return /* @__PURE__ */ (0,
|
|
1872
|
-
/* @__PURE__ */ (0,
|
|
1873
|
-
meta ? /* @__PURE__ */ (0,
|
|
1874
|
-
actions ? /* @__PURE__ */ (0,
|
|
2199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
|
|
2200
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "pire-eyebrow", children: title }),
|
|
2201
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
|
|
2202
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
|
|
1875
2203
|
] });
|
|
1876
2204
|
}
|
|
1877
2205
|
|
|
1878
2206
|
// src/components/layout/SelectionBar.tsx
|
|
1879
|
-
var
|
|
2207
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
1880
2208
|
function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
|
|
1881
2209
|
if (!count) return null;
|
|
1882
|
-
return /* @__PURE__ */ (0,
|
|
1883
|
-
/* @__PURE__ */ (0,
|
|
2210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
|
|
2211
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "pire-selectionbar-count", children: [
|
|
1884
2212
|
count.toLocaleString(),
|
|
1885
2213
|
" ",
|
|
1886
2214
|
noun,
|
|
1887
2215
|
count === 1 ? "" : "s",
|
|
1888
2216
|
" selected"
|
|
1889
2217
|
] }),
|
|
1890
|
-
children ? /* @__PURE__ */ (0,
|
|
1891
|
-
actions ? /* @__PURE__ */ (0,
|
|
2218
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
|
|
2219
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
|
|
1892
2220
|
] });
|
|
1893
2221
|
}
|
|
1894
2222
|
|
|
1895
2223
|
// src/components/layout/FooterBar.tsx
|
|
1896
|
-
var
|
|
2224
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
1897
2225
|
function FooterBar({ note, actions, children, className, ...rest }) {
|
|
1898
|
-
return /* @__PURE__ */ (0,
|
|
1899
|
-
note ? /* @__PURE__ */ (0,
|
|
2226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
|
|
2227
|
+
note ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
|
|
1900
2228
|
children,
|
|
1901
|
-
actions ? /* @__PURE__ */ (0,
|
|
2229
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
|
|
1902
2230
|
] });
|
|
1903
2231
|
}
|
|
1904
2232
|
|
|
1905
2233
|
// src/components/patterns/ConfirmDialog.tsx
|
|
1906
|
-
var
|
|
2234
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
1907
2235
|
function ConfirmDialog({
|
|
1908
2236
|
isOpen,
|
|
1909
2237
|
title,
|
|
@@ -1917,7 +2245,7 @@ function ConfirmDialog({
|
|
|
1917
2245
|
onConfirm,
|
|
1918
2246
|
onCancel
|
|
1919
2247
|
}) {
|
|
1920
|
-
return /* @__PURE__ */ (0,
|
|
2248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
1921
2249
|
Dialog,
|
|
1922
2250
|
{
|
|
1923
2251
|
isOpen,
|
|
@@ -1927,12 +2255,12 @@ function ConfirmDialog({
|
|
|
1927
2255
|
onClose: onCancel,
|
|
1928
2256
|
isDismissable: !isBusy,
|
|
1929
2257
|
showClose: false,
|
|
1930
|
-
footer: /* @__PURE__ */ (0,
|
|
1931
|
-
/* @__PURE__ */ (0,
|
|
1932
|
-
/* @__PURE__ */ (0,
|
|
2258
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
|
|
2259
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
|
|
2260
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
|
|
1933
2261
|
] }),
|
|
1934
2262
|
children: [
|
|
1935
|
-
consequence ? /* @__PURE__ */ (0,
|
|
2263
|
+
consequence ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
|
|
1936
2264
|
children
|
|
1937
2265
|
]
|
|
1938
2266
|
}
|
|
@@ -1940,11 +2268,12 @@ function ConfirmDialog({
|
|
|
1940
2268
|
}
|
|
1941
2269
|
|
|
1942
2270
|
// src/components/patterns/SidePanel.tsx
|
|
1943
|
-
var
|
|
1944
|
-
var
|
|
2271
|
+
var import_react_aria_components28 = require("react-aria-components");
|
|
2272
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
1945
2273
|
function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
|
|
1946
|
-
|
|
1947
|
-
|
|
2274
|
+
const msg = usePireMessages();
|
|
2275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
2276
|
+
import_react_aria_components28.ModalOverlay,
|
|
1948
2277
|
{
|
|
1949
2278
|
className: "pire-sidepanel-overlay",
|
|
1950
2279
|
isOpen,
|
|
@@ -1952,34 +2281,34 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
|
|
|
1952
2281
|
onOpenChange: (o) => {
|
|
1953
2282
|
if (!o) onClose?.();
|
|
1954
2283
|
},
|
|
1955
|
-
children: /* @__PURE__ */ (0,
|
|
1956
|
-
/* @__PURE__ */ (0,
|
|
1957
|
-
/* @__PURE__ */ (0,
|
|
1958
|
-
/* @__PURE__ */ (0,
|
|
1959
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
2284
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components28.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_aria_components28.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
|
|
2285
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("header", { className: "pire-dialog-head", children: [
|
|
2286
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
2287
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components28.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
|
|
2288
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
|
|
1960
2289
|
] }),
|
|
1961
|
-
/* @__PURE__ */ (0,
|
|
2290
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
|
|
1962
2291
|
] }),
|
|
1963
|
-
/* @__PURE__ */ (0,
|
|
1964
|
-
footer ? /* @__PURE__ */ (0,
|
|
2292
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
|
|
2293
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
1965
2294
|
] }) })
|
|
1966
2295
|
}
|
|
1967
2296
|
);
|
|
1968
2297
|
}
|
|
1969
2298
|
|
|
1970
2299
|
// src/components/patterns/EmptyState.tsx
|
|
1971
|
-
var
|
|
2300
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
1972
2301
|
function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
|
|
1973
|
-
return /* @__PURE__ */ (0,
|
|
1974
|
-
/* @__PURE__ */ (0,
|
|
1975
|
-
title ? /* @__PURE__ */ (0,
|
|
1976
|
-
children ? /* @__PURE__ */ (0,
|
|
2302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
|
|
2303
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
|
|
2304
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
|
|
2305
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
|
|
1977
2306
|
action
|
|
1978
2307
|
] });
|
|
1979
2308
|
}
|
|
1980
2309
|
|
|
1981
2310
|
// src/index.ts
|
|
1982
|
-
var
|
|
2311
|
+
var import_react_aria_components29 = require("react-aria-components");
|
|
1983
2312
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1984
2313
|
0 && (module.exports = {
|
|
1985
2314
|
Avatar,
|
|
@@ -1999,25 +2328,32 @@ var import_react_aria_components25 = require("react-aria-components");
|
|
|
1999
2328
|
FilterBar,
|
|
2000
2329
|
FooterBar,
|
|
2001
2330
|
FormField,
|
|
2331
|
+
Heading,
|
|
2002
2332
|
I18nProvider,
|
|
2003
2333
|
Icon,
|
|
2004
2334
|
IconButton,
|
|
2005
2335
|
InlineMessage,
|
|
2006
2336
|
Input,
|
|
2007
2337
|
KpiTile,
|
|
2338
|
+
Link,
|
|
2008
2339
|
LinkList,
|
|
2009
2340
|
Menu,
|
|
2010
2341
|
MenuItem,
|
|
2342
|
+
MenuSection,
|
|
2343
|
+
MenuSeparator,
|
|
2011
2344
|
MenuTrigger,
|
|
2012
2345
|
MultiComboBox,
|
|
2013
2346
|
NumberField,
|
|
2014
2347
|
ObjectHeader,
|
|
2348
|
+
PageBand,
|
|
2015
2349
|
PageHeader,
|
|
2016
2350
|
Pagination,
|
|
2351
|
+
PireIntlProvider,
|
|
2017
2352
|
Popover,
|
|
2018
2353
|
ProgressBar,
|
|
2019
2354
|
Radio,
|
|
2020
2355
|
RadioGroup,
|
|
2356
|
+
RouterProvider,
|
|
2021
2357
|
SectionHeader,
|
|
2022
2358
|
SegmentedControl,
|
|
2023
2359
|
Select,
|
|
@@ -2028,9 +2364,12 @@ var import_react_aria_components25 = require("react-aria-components");
|
|
|
2028
2364
|
SidePanel,
|
|
2029
2365
|
Skeleton,
|
|
2030
2366
|
SkeletonTableRow,
|
|
2367
|
+
Strong,
|
|
2368
|
+
SubmenuTrigger,
|
|
2031
2369
|
Switch,
|
|
2032
2370
|
Tabs,
|
|
2033
2371
|
Tag,
|
|
2372
|
+
Text,
|
|
2034
2373
|
TextArea,
|
|
2035
2374
|
Timeline,
|
|
2036
2375
|
Toast,
|
|
@@ -2039,6 +2378,9 @@ var import_react_aria_components25 = require("react-aria-components");
|
|
|
2039
2378
|
ValueHelpDialog,
|
|
2040
2379
|
ValueHelpField,
|
|
2041
2380
|
configureIcons,
|
|
2381
|
+
enMessages,
|
|
2382
|
+
esMessages,
|
|
2383
|
+
usePireMessages,
|
|
2042
2384
|
useToast
|
|
2043
2385
|
});
|
|
2044
2386
|
//# sourceMappingURL=index.cjs.map
|