@orianatech/pire 0.5.0 → 0.6.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/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.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/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 +67 -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 +64 -0
- package/dist/i18n/messages.d.ts +65 -0
- package/dist/i18n/messages.d.ts.map +1 -0
- package/dist/index.cjs +673 -399
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +627 -359
- package/dist/index.js.map +1 -1
- package/dist/tokens/typography.css +5 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -388,25 +388,131 @@ function SegmentedControl({
|
|
|
388
388
|
);
|
|
389
389
|
}
|
|
390
390
|
|
|
391
|
+
// src/components/core/Text.tsx
|
|
392
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
393
|
+
function Text({
|
|
394
|
+
size = "body",
|
|
395
|
+
color = "primary",
|
|
396
|
+
weight = "regular",
|
|
397
|
+
numeric,
|
|
398
|
+
eyebrow,
|
|
399
|
+
truncate,
|
|
400
|
+
elementType: Wrapper = "p",
|
|
401
|
+
className,
|
|
402
|
+
style,
|
|
403
|
+
...rest
|
|
404
|
+
}) {
|
|
405
|
+
const lineClamp = typeof truncate === "number" ? truncate : truncate ? 1 : void 0;
|
|
406
|
+
const clampStyle = lineClamp == null ? style : { ["--pire-text-clamp"]: lineClamp, ...style };
|
|
407
|
+
return /* @__PURE__ */ jsx10(
|
|
408
|
+
Wrapper,
|
|
409
|
+
{
|
|
410
|
+
className: cx("pire-text", className),
|
|
411
|
+
"data-size": size,
|
|
412
|
+
"data-color": color,
|
|
413
|
+
"data-weight": weight === "strong" ? "strong" : void 0,
|
|
414
|
+
"data-numeric": numeric ? "true" : void 0,
|
|
415
|
+
"data-eyebrow": eyebrow ? "true" : void 0,
|
|
416
|
+
"data-truncate": lineClamp != null ? "true" : void 0,
|
|
417
|
+
style: clampStyle,
|
|
418
|
+
...rest
|
|
419
|
+
}
|
|
420
|
+
);
|
|
421
|
+
}
|
|
422
|
+
function Strong({ className, ...rest }) {
|
|
423
|
+
return /* @__PURE__ */ jsx10(Text, { elementType: "span", weight: "strong", className, ...rest });
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
// src/components/core/Heading.tsx
|
|
427
|
+
import { Heading as AriaHeading } from "react-aria-components";
|
|
428
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
429
|
+
function Heading({
|
|
430
|
+
level = 2,
|
|
431
|
+
size,
|
|
432
|
+
color = "primary",
|
|
433
|
+
truncate,
|
|
434
|
+
className,
|
|
435
|
+
style,
|
|
436
|
+
...rest
|
|
437
|
+
}) {
|
|
438
|
+
const lineClamp = typeof truncate === "number" ? truncate : truncate ? 1 : void 0;
|
|
439
|
+
const clampStyle = lineClamp == null ? style : { ["--pire-text-clamp"]: lineClamp, ...style };
|
|
440
|
+
return /* @__PURE__ */ jsx11(
|
|
441
|
+
AriaHeading,
|
|
442
|
+
{
|
|
443
|
+
level,
|
|
444
|
+
className: cx("pire-heading", className),
|
|
445
|
+
"data-size": size ?? `h${level}`,
|
|
446
|
+
"data-color": color,
|
|
447
|
+
"data-truncate": lineClamp != null ? "true" : void 0,
|
|
448
|
+
style: clampStyle,
|
|
449
|
+
...rest
|
|
450
|
+
}
|
|
451
|
+
);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
// src/components/core/Link.tsx
|
|
455
|
+
import { Link as AriaLink } from "react-aria-components";
|
|
456
|
+
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
457
|
+
function Link({ children, size, isExternal, className, rel, ...rest }) {
|
|
458
|
+
return /* @__PURE__ */ jsxs7(
|
|
459
|
+
AriaLink,
|
|
460
|
+
{
|
|
461
|
+
className: cx("pire-link", className),
|
|
462
|
+
"data-size": size,
|
|
463
|
+
"data-external": isExternal ? "true" : void 0,
|
|
464
|
+
rel: isExternal ? rel ?? "noopener noreferrer" : rel,
|
|
465
|
+
...rest,
|
|
466
|
+
children: [
|
|
467
|
+
children,
|
|
468
|
+
isExternal ? /* @__PURE__ */ jsx12(Icon, { name: "external-link", size: 12, className: "pire-link-external" }) : null
|
|
469
|
+
]
|
|
470
|
+
}
|
|
471
|
+
);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
// src/components/core/Separator.tsx
|
|
475
|
+
import { Separator as AriaSeparator } from "react-aria-components";
|
|
476
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
477
|
+
function Separator({
|
|
478
|
+
orientation = "horizontal",
|
|
479
|
+
emphasis = "default",
|
|
480
|
+
spacing = "md",
|
|
481
|
+
className,
|
|
482
|
+
...rest
|
|
483
|
+
}) {
|
|
484
|
+
return /* @__PURE__ */ jsx13(
|
|
485
|
+
AriaSeparator,
|
|
486
|
+
{
|
|
487
|
+
orientation,
|
|
488
|
+
className: cx("pire-separator", className),
|
|
489
|
+
"data-orientation": orientation,
|
|
490
|
+
"data-emphasis": emphasis,
|
|
491
|
+
"data-spacing": spacing,
|
|
492
|
+
...rest
|
|
493
|
+
}
|
|
494
|
+
);
|
|
495
|
+
}
|
|
496
|
+
|
|
391
497
|
// src/components/forms/FormField.tsx
|
|
392
|
-
import { jsx as
|
|
498
|
+
import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
393
499
|
function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked", children, className, ...rest }) {
|
|
394
|
-
return /* @__PURE__ */
|
|
395
|
-
/* @__PURE__ */
|
|
500
|
+
return /* @__PURE__ */ jsxs8("div", { className: cx("pire-field", className), "data-layout": layout, ...rest, children: [
|
|
501
|
+
/* @__PURE__ */ jsxs8("label", { className: "pire-field-label", htmlFor, children: [
|
|
396
502
|
label,
|
|
397
|
-
isRequired ? /* @__PURE__ */
|
|
503
|
+
isRequired ? /* @__PURE__ */ jsx14("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
398
504
|
] }),
|
|
399
505
|
children,
|
|
400
|
-
error ? /* @__PURE__ */
|
|
401
|
-
/* @__PURE__ */
|
|
506
|
+
error ? /* @__PURE__ */ jsxs8("span", { className: "pire-field-error", role: "alert", children: [
|
|
507
|
+
/* @__PURE__ */ jsx14(Icon, { name: "alert-circle", size: 12 }),
|
|
402
508
|
error
|
|
403
|
-
] }) : hint ? /* @__PURE__ */
|
|
509
|
+
] }) : hint ? /* @__PURE__ */ jsx14("span", { className: "pire-field-hint", children: hint }) : null
|
|
404
510
|
] });
|
|
405
511
|
}
|
|
406
512
|
|
|
407
513
|
// src/components/forms/Input.tsx
|
|
408
|
-
import { TextField, Label, Input as AriaInput, Group, Text, FieldError } from "react-aria-components";
|
|
409
|
-
import { jsx as
|
|
514
|
+
import { TextField, Label, Input as AriaInput, Group, Text as Text2, FieldError } from "react-aria-components";
|
|
515
|
+
import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
410
516
|
function Input({
|
|
411
517
|
label,
|
|
412
518
|
icon,
|
|
@@ -422,7 +528,7 @@ function Input({
|
|
|
422
528
|
onChange,
|
|
423
529
|
...rest
|
|
424
530
|
}) {
|
|
425
|
-
return /* @__PURE__ */
|
|
531
|
+
return /* @__PURE__ */ jsxs9(
|
|
426
532
|
TextField,
|
|
427
533
|
{
|
|
428
534
|
className: cx("pire-field", className),
|
|
@@ -431,11 +537,11 @@ function Input({
|
|
|
431
537
|
validationBehavior: "aria",
|
|
432
538
|
...rest,
|
|
433
539
|
children: [
|
|
434
|
-
label ? /* @__PURE__ */
|
|
540
|
+
label ? /* @__PURE__ */ jsxs9(Label, { className: "pire-field-label", children: [
|
|
435
541
|
label,
|
|
436
|
-
rest.isRequired ? /* @__PURE__ */
|
|
542
|
+
rest.isRequired ? /* @__PURE__ */ jsx15("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
437
543
|
] }) : null,
|
|
438
|
-
/* @__PURE__ */
|
|
544
|
+
/* @__PURE__ */ jsxs9(
|
|
439
545
|
Group,
|
|
440
546
|
{
|
|
441
547
|
className: "pire-control",
|
|
@@ -444,14 +550,14 @@ function Input({
|
|
|
444
550
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
445
551
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
446
552
|
children: [
|
|
447
|
-
icon ? /* @__PURE__ */
|
|
448
|
-
/* @__PURE__ */
|
|
449
|
-
suffix ? /* @__PURE__ */
|
|
553
|
+
icon ? /* @__PURE__ */ jsx15(Icon, { name: icon, size: 16, className: "pire-leading-icon" }) : null,
|
|
554
|
+
/* @__PURE__ */ jsx15(AriaInput, { ref: inputRef, className: "pire-input", "data-numeric": numeric ? "true" : void 0 }),
|
|
555
|
+
suffix ? /* @__PURE__ */ jsx15("span", { className: "pire-affix", children: suffix }) : null
|
|
450
556
|
]
|
|
451
557
|
}
|
|
452
558
|
),
|
|
453
|
-
description ? /* @__PURE__ */
|
|
454
|
-
/* @__PURE__ */
|
|
559
|
+
description ? /* @__PURE__ */ jsx15(Text2, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
560
|
+
/* @__PURE__ */ jsx15(FieldError, { className: "pire-field-error", children: errorMessage })
|
|
455
561
|
]
|
|
456
562
|
}
|
|
457
563
|
);
|
|
@@ -459,8 +565,8 @@ function Input({
|
|
|
459
565
|
|
|
460
566
|
// src/components/forms/TextArea.tsx
|
|
461
567
|
import * as React5 from "react";
|
|
462
|
-
import { TextField as TextField2, Label as Label2, TextArea as AriaTextArea, Group as Group2, Text as
|
|
463
|
-
import { jsx as
|
|
568
|
+
import { TextField as TextField2, Label as Label2, TextArea as AriaTextArea, Group as Group2, Text as Text3, FieldError as FieldError2 } from "react-aria-components";
|
|
569
|
+
import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
464
570
|
var useIsomorphicLayoutEffect = typeof document === "undefined" ? React5.useEffect : React5.useLayoutEffect;
|
|
465
571
|
function TextArea({
|
|
466
572
|
label,
|
|
@@ -501,7 +607,7 @@ function TextArea({
|
|
|
501
607
|
}
|
|
502
608
|
grow();
|
|
503
609
|
}, [autoGrow, grow, rest.value]);
|
|
504
|
-
return /* @__PURE__ */
|
|
610
|
+
return /* @__PURE__ */ jsxs10(
|
|
505
611
|
TextField2,
|
|
506
612
|
{
|
|
507
613
|
className: cx("pire-field", className),
|
|
@@ -510,11 +616,11 @@ function TextArea({
|
|
|
510
616
|
validationBehavior: "aria",
|
|
511
617
|
...rest,
|
|
512
618
|
children: [
|
|
513
|
-
label ? /* @__PURE__ */
|
|
619
|
+
label ? /* @__PURE__ */ jsxs10(Label2, { className: "pire-field-label", children: [
|
|
514
620
|
label,
|
|
515
|
-
rest.isRequired ? /* @__PURE__ */
|
|
621
|
+
rest.isRequired ? /* @__PURE__ */ jsx16("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
516
622
|
] }) : null,
|
|
517
|
-
/* @__PURE__ */
|
|
623
|
+
/* @__PURE__ */ jsx16(
|
|
518
624
|
Group2,
|
|
519
625
|
{
|
|
520
626
|
className: "pire-control",
|
|
@@ -523,7 +629,7 @@ function TextArea({
|
|
|
523
629
|
"data-multiline": "true",
|
|
524
630
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
525
631
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
526
|
-
children: /* @__PURE__ */
|
|
632
|
+
children: /* @__PURE__ */ jsx16(
|
|
527
633
|
AriaTextArea,
|
|
528
634
|
{
|
|
529
635
|
ref,
|
|
@@ -535,8 +641,8 @@ function TextArea({
|
|
|
535
641
|
)
|
|
536
642
|
}
|
|
537
643
|
),
|
|
538
|
-
description ? /* @__PURE__ */
|
|
539
|
-
/* @__PURE__ */
|
|
644
|
+
description ? /* @__PURE__ */ jsx16(Text3, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
645
|
+
/* @__PURE__ */ jsx16(FieldError2, { className: "pire-field-error", children: errorMessage })
|
|
540
646
|
]
|
|
541
647
|
}
|
|
542
648
|
);
|
|
@@ -551,10 +657,10 @@ import {
|
|
|
551
657
|
Popover,
|
|
552
658
|
ListBox,
|
|
553
659
|
ListBoxItem,
|
|
554
|
-
Text as
|
|
660
|
+
Text as Text4,
|
|
555
661
|
FieldError as FieldError3
|
|
556
662
|
} from "react-aria-components";
|
|
557
|
-
import { jsx as
|
|
663
|
+
import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
558
664
|
var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
|
|
559
665
|
function Select({
|
|
560
666
|
label,
|
|
@@ -572,7 +678,7 @@ function Select({
|
|
|
572
678
|
...rest
|
|
573
679
|
}) {
|
|
574
680
|
const items = options.map(norm);
|
|
575
|
-
return /* @__PURE__ */
|
|
681
|
+
return /* @__PURE__ */ jsxs11(
|
|
576
682
|
AriaSelect,
|
|
577
683
|
{
|
|
578
684
|
className: cx("pire-field", className),
|
|
@@ -584,11 +690,11 @@ function Select({
|
|
|
584
690
|
validationBehavior: "aria",
|
|
585
691
|
...rest,
|
|
586
692
|
children: [
|
|
587
|
-
label ? /* @__PURE__ */
|
|
693
|
+
label ? /* @__PURE__ */ jsxs11(Label3, { className: "pire-field-label", children: [
|
|
588
694
|
label,
|
|
589
|
-
rest.isRequired ? /* @__PURE__ */
|
|
695
|
+
rest.isRequired ? /* @__PURE__ */ jsx17("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
590
696
|
] }) : null,
|
|
591
|
-
/* @__PURE__ */
|
|
697
|
+
/* @__PURE__ */ jsxs11(
|
|
592
698
|
AriaButton4,
|
|
593
699
|
{
|
|
594
700
|
className: "pire-control",
|
|
@@ -596,14 +702,14 @@ function Select({
|
|
|
596
702
|
"data-full-width": String(fullWidth),
|
|
597
703
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
598
704
|
children: [
|
|
599
|
-
/* @__PURE__ */
|
|
600
|
-
/* @__PURE__ */
|
|
705
|
+
/* @__PURE__ */ jsx17(SelectValue, { className: "pire-select-value" }),
|
|
706
|
+
/* @__PURE__ */ jsx17(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
|
|
601
707
|
]
|
|
602
708
|
}
|
|
603
709
|
),
|
|
604
|
-
description ? /* @__PURE__ */
|
|
605
|
-
/* @__PURE__ */
|
|
606
|
-
/* @__PURE__ */
|
|
710
|
+
description ? /* @__PURE__ */ jsx17(Text4, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
711
|
+
/* @__PURE__ */ jsx17(FieldError3, { className: "pire-field-error", children: errorMessage }),
|
|
712
|
+
/* @__PURE__ */ jsx17(Popover, { className: "pire-popover", children: /* @__PURE__ */ jsx17(ListBox, { className: "pire-listbox", items, children: (item) => /* @__PURE__ */ jsx17(ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label }) }) })
|
|
607
713
|
]
|
|
608
714
|
}
|
|
609
715
|
);
|
|
@@ -611,13 +717,13 @@ function Select({
|
|
|
611
717
|
|
|
612
718
|
// src/components/forms/Checkbox.tsx
|
|
613
719
|
import { Checkbox as AriaCheckbox } from "react-aria-components";
|
|
614
|
-
import { Fragment, jsx as
|
|
720
|
+
import { Fragment, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
615
721
|
function Checkbox({ label, hint, children, className, ...rest }) {
|
|
616
|
-
return /* @__PURE__ */
|
|
617
|
-
/* @__PURE__ */
|
|
618
|
-
/* @__PURE__ */
|
|
722
|
+
return /* @__PURE__ */ jsx18(AriaCheckbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment, { children: [
|
|
723
|
+
/* @__PURE__ */ jsx18("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ jsx18(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ jsx18(Icon, { name: "check", size: 12 }) : null }),
|
|
724
|
+
/* @__PURE__ */ jsxs12("span", { children: [
|
|
619
725
|
label ?? children,
|
|
620
|
-
hint ? /* @__PURE__ */
|
|
726
|
+
hint ? /* @__PURE__ */ jsx18("span", { className: "pire-choice-hint", children: hint }) : null
|
|
621
727
|
] })
|
|
622
728
|
] }) });
|
|
623
729
|
}
|
|
@@ -627,35 +733,35 @@ import {
|
|
|
627
733
|
RadioGroup as AriaRadioGroup,
|
|
628
734
|
Radio as AriaRadio,
|
|
629
735
|
Label as Label4,
|
|
630
|
-
Text as
|
|
736
|
+
Text as Text5,
|
|
631
737
|
FieldError as FieldError4
|
|
632
738
|
} from "react-aria-components";
|
|
633
|
-
import { jsx as
|
|
739
|
+
import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
634
740
|
function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
|
|
635
|
-
return /* @__PURE__ */
|
|
636
|
-
label ? /* @__PURE__ */
|
|
637
|
-
/* @__PURE__ */
|
|
638
|
-
description ? /* @__PURE__ */
|
|
639
|
-
/* @__PURE__ */
|
|
741
|
+
return /* @__PURE__ */ jsxs13(AriaRadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
|
|
742
|
+
label ? /* @__PURE__ */ jsx19(Label4, { className: "pire-field-label", children: label }) : null,
|
|
743
|
+
/* @__PURE__ */ jsx19("div", { className: "pire-radiogroup", children }),
|
|
744
|
+
description ? /* @__PURE__ */ jsx19(Text5, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
745
|
+
/* @__PURE__ */ jsx19(FieldError4, { className: "pire-field-error", children: errorMessage })
|
|
640
746
|
] });
|
|
641
747
|
}
|
|
642
748
|
function Radio({ label, hint, children, className, ...rest }) {
|
|
643
|
-
return /* @__PURE__ */
|
|
644
|
-
/* @__PURE__ */
|
|
645
|
-
/* @__PURE__ */
|
|
749
|
+
return /* @__PURE__ */ jsxs13(AriaRadio, { className: cx("pire-choice", className), ...rest, children: [
|
|
750
|
+
/* @__PURE__ */ jsx19("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
|
|
751
|
+
/* @__PURE__ */ jsxs13("span", { children: [
|
|
646
752
|
label ?? children,
|
|
647
|
-
hint ? /* @__PURE__ */
|
|
753
|
+
hint ? /* @__PURE__ */ jsx19("span", { className: "pire-choice-hint", children: hint }) : null
|
|
648
754
|
] })
|
|
649
755
|
] });
|
|
650
756
|
}
|
|
651
757
|
|
|
652
758
|
// src/components/forms/Switch.tsx
|
|
653
759
|
import { Switch as AriaSwitch } from "react-aria-components";
|
|
654
|
-
import { jsx as
|
|
760
|
+
import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
655
761
|
function Switch({ label, children, className, ...rest }) {
|
|
656
|
-
return /* @__PURE__ */
|
|
657
|
-
/* @__PURE__ */
|
|
658
|
-
/* @__PURE__ */
|
|
762
|
+
return /* @__PURE__ */ jsxs14(AriaSwitch, { className: cx("pire-choice", className), ...rest, children: [
|
|
763
|
+
/* @__PURE__ */ jsx20("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: "pire-switch-thumb" }) }),
|
|
764
|
+
/* @__PURE__ */ jsx20("span", { children: label ?? children })
|
|
659
765
|
] });
|
|
660
766
|
}
|
|
661
767
|
|
|
@@ -669,10 +775,95 @@ import {
|
|
|
669
775
|
Popover as Popover2,
|
|
670
776
|
ListBox as ListBox2,
|
|
671
777
|
ListBoxItem as ListBoxItem2,
|
|
672
|
-
Text as
|
|
778
|
+
Text as Text6,
|
|
673
779
|
FieldError as FieldError5
|
|
674
780
|
} from "react-aria-components";
|
|
675
|
-
|
|
781
|
+
|
|
782
|
+
// src/i18n/PireIntlProvider.tsx
|
|
783
|
+
import * as React6 from "react";
|
|
784
|
+
|
|
785
|
+
// src/i18n/messages.ts
|
|
786
|
+
var enMessages = {
|
|
787
|
+
filterBarLabel: "Filters",
|
|
788
|
+
filterBarGo: "Go",
|
|
789
|
+
filterBarClearAll: "Clear all",
|
|
790
|
+
dataTableSelectAll: "Select all rows",
|
|
791
|
+
dataTableSelectRow: "Select row",
|
|
792
|
+
dialogClose: "Close",
|
|
793
|
+
sidePanelClose: "Close panel",
|
|
794
|
+
inlineMessageDismiss: "Dismiss message",
|
|
795
|
+
toastDismiss: "Dismiss",
|
|
796
|
+
toastRegionLabel: "Notifications",
|
|
797
|
+
comboBoxShowSuggestions: "Show suggestions",
|
|
798
|
+
datePickerOpenCalendar: "Open calendar",
|
|
799
|
+
datePickerPreviousMonth: "Previous month",
|
|
800
|
+
datePickerNextMonth: "Next month",
|
|
801
|
+
numberFieldIncrease: "Increase",
|
|
802
|
+
numberFieldDecrease: "Decrease",
|
|
803
|
+
valueHelpFieldClear: "Clear selection",
|
|
804
|
+
valueHelpFieldOpenNamed: "Select {label}",
|
|
805
|
+
valueHelpFieldOpen: "Open value help",
|
|
806
|
+
valueHelpDialogSearch: "Search records",
|
|
807
|
+
valueHelpDialogCancel: "Cancel",
|
|
808
|
+
paginationLabel: "Pagination",
|
|
809
|
+
paginationRange: "{from}\u2013{to} of {total}",
|
|
810
|
+
paginationPageOf: "Page {page} of {pages}",
|
|
811
|
+
paginationPrevious: "Previous page",
|
|
812
|
+
paginationNext: "Next page",
|
|
813
|
+
paginationRowsPerPage: "Rows per page",
|
|
814
|
+
sideNavLabel: "Main navigation"
|
|
815
|
+
};
|
|
816
|
+
var esMessages = {
|
|
817
|
+
filterBarLabel: "Filtros",
|
|
818
|
+
filterBarGo: "Buscar",
|
|
819
|
+
filterBarClearAll: "Limpiar todo",
|
|
820
|
+
dataTableSelectAll: "Seleccionar todas las filas",
|
|
821
|
+
dataTableSelectRow: "Seleccionar fila",
|
|
822
|
+
dialogClose: "Cerrar",
|
|
823
|
+
sidePanelClose: "Cerrar panel",
|
|
824
|
+
inlineMessageDismiss: "Descartar mensaje",
|
|
825
|
+
toastDismiss: "Descartar",
|
|
826
|
+
toastRegionLabel: "Notificaciones",
|
|
827
|
+
comboBoxShowSuggestions: "Mostrar sugerencias",
|
|
828
|
+
datePickerOpenCalendar: "Abrir calendario",
|
|
829
|
+
datePickerPreviousMonth: "Mes anterior",
|
|
830
|
+
datePickerNextMonth: "Mes siguiente",
|
|
831
|
+
numberFieldIncrease: "Aumentar",
|
|
832
|
+
numberFieldDecrease: "Disminuir",
|
|
833
|
+
valueHelpFieldClear: "Limpiar selecci\xF3n",
|
|
834
|
+
valueHelpFieldOpenNamed: "Seleccionar {label}",
|
|
835
|
+
valueHelpFieldOpen: "Abrir ayuda de valores",
|
|
836
|
+
valueHelpDialogSearch: "Buscar registros",
|
|
837
|
+
valueHelpDialogCancel: "Cancelar",
|
|
838
|
+
paginationLabel: "Paginaci\xF3n",
|
|
839
|
+
paginationRange: "{from}\u2013{to} de {total}",
|
|
840
|
+
paginationPageOf: "P\xE1gina {page} de {pages}",
|
|
841
|
+
paginationPrevious: "P\xE1gina anterior",
|
|
842
|
+
paginationNext: "P\xE1gina siguiente",
|
|
843
|
+
paginationRowsPerPage: "Filas por p\xE1gina",
|
|
844
|
+
sideNavLabel: "Navegaci\xF3n principal"
|
|
845
|
+
};
|
|
846
|
+
|
|
847
|
+
// src/i18n/PireIntlProvider.tsx
|
|
848
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
849
|
+
var MessagesContext = React6.createContext(enMessages);
|
|
850
|
+
function PireIntlProvider({ messages, children }) {
|
|
851
|
+
const value = React6.useMemo(
|
|
852
|
+
() => messages ? { ...enMessages, ...messages } : enMessages,
|
|
853
|
+
[messages]
|
|
854
|
+
);
|
|
855
|
+
return /* @__PURE__ */ jsx21(MessagesContext.Provider, { value, children });
|
|
856
|
+
}
|
|
857
|
+
function usePireMessages() {
|
|
858
|
+
return React6.useContext(MessagesContext);
|
|
859
|
+
}
|
|
860
|
+
function useMessage(key, override) {
|
|
861
|
+
const messages = React6.useContext(MessagesContext);
|
|
862
|
+
return override ?? messages[key];
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
// src/components/forms/ComboBox.tsx
|
|
866
|
+
import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
676
867
|
var norm2 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
677
868
|
function ComboBox({
|
|
678
869
|
label,
|
|
@@ -689,8 +880,9 @@ function ComboBox({
|
|
|
689
880
|
style,
|
|
690
881
|
...rest
|
|
691
882
|
}) {
|
|
883
|
+
const msg = usePireMessages();
|
|
692
884
|
const items = options.map(norm2);
|
|
693
|
-
return /* @__PURE__ */
|
|
885
|
+
return /* @__PURE__ */ jsxs15(
|
|
694
886
|
AriaComboBox,
|
|
695
887
|
{
|
|
696
888
|
className: cx("pire-field", className),
|
|
@@ -704,11 +896,11 @@ function ComboBox({
|
|
|
704
896
|
validationBehavior: "aria",
|
|
705
897
|
...rest,
|
|
706
898
|
children: [
|
|
707
|
-
label ? /* @__PURE__ */
|
|
899
|
+
label ? /* @__PURE__ */ jsxs15(Label5, { className: "pire-field-label", children: [
|
|
708
900
|
label,
|
|
709
|
-
rest.isRequired ? /* @__PURE__ */
|
|
901
|
+
rest.isRequired ? /* @__PURE__ */ jsx22("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
710
902
|
] }) : null,
|
|
711
|
-
/* @__PURE__ */
|
|
903
|
+
/* @__PURE__ */ jsxs15(
|
|
712
904
|
Group3,
|
|
713
905
|
{
|
|
714
906
|
className: "pire-control",
|
|
@@ -716,17 +908,17 @@ function ComboBox({
|
|
|
716
908
|
"data-full-width": String(fullWidth),
|
|
717
909
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
718
910
|
children: [
|
|
719
|
-
/* @__PURE__ */
|
|
720
|
-
/* @__PURE__ */
|
|
721
|
-
/* @__PURE__ */
|
|
911
|
+
/* @__PURE__ */ jsx22(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
|
|
912
|
+
/* @__PURE__ */ jsx22(AriaInput2, { className: "pire-input", placeholder: rest.placeholder }),
|
|
913
|
+
/* @__PURE__ */ jsx22(AriaButton5, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx22(Icon, { name: "chevron-down", size: 16 }) })
|
|
722
914
|
]
|
|
723
915
|
}
|
|
724
916
|
),
|
|
725
|
-
description ? /* @__PURE__ */
|
|
726
|
-
/* @__PURE__ */
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
/* @__PURE__ */
|
|
729
|
-
item.secondary ? /* @__PURE__ */
|
|
917
|
+
description ? /* @__PURE__ */ jsx22(Text6, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
918
|
+
/* @__PURE__ */ jsx22(FieldError5, { className: "pire-field-error", children: errorMessage }),
|
|
919
|
+
/* @__PURE__ */ jsx22(Popover2, { className: "pire-popover", children: /* @__PURE__ */ jsx22(ListBox2, { className: "pire-listbox", children: (item) => /* @__PURE__ */ jsxs15(ListBoxItem2, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
|
|
920
|
+
/* @__PURE__ */ jsx22("span", { style: { flex: 1 }, children: item.label }),
|
|
921
|
+
item.secondary ? /* @__PURE__ */ jsx22("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
|
|
730
922
|
] }) }) })
|
|
731
923
|
]
|
|
732
924
|
}
|
|
@@ -734,7 +926,7 @@ function ComboBox({
|
|
|
734
926
|
}
|
|
735
927
|
|
|
736
928
|
// src/components/forms/MultiComboBox.tsx
|
|
737
|
-
import * as
|
|
929
|
+
import * as React7 from "react";
|
|
738
930
|
import {
|
|
739
931
|
ComboBox as AriaComboBox2,
|
|
740
932
|
Label as Label6,
|
|
@@ -745,11 +937,11 @@ import {
|
|
|
745
937
|
Popover as Popover3,
|
|
746
938
|
ListBox as ListBox3,
|
|
747
939
|
ListBoxItem as ListBoxItem3,
|
|
748
|
-
Text as
|
|
940
|
+
Text as Text7,
|
|
749
941
|
FieldError as FieldError6,
|
|
750
942
|
VisuallyHidden
|
|
751
943
|
} from "react-aria-components";
|
|
752
|
-
import { jsx as
|
|
944
|
+
import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
753
945
|
var norm3 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
754
946
|
function MultiComboBox({
|
|
755
947
|
label,
|
|
@@ -767,13 +959,14 @@ function MultiComboBox({
|
|
|
767
959
|
style,
|
|
768
960
|
...rest
|
|
769
961
|
}) {
|
|
770
|
-
const
|
|
771
|
-
const
|
|
772
|
-
const [
|
|
773
|
-
const
|
|
962
|
+
const msg = usePireMessages();
|
|
963
|
+
const items = React7.useMemo(() => options.map(norm3), [options]);
|
|
964
|
+
const [uncontrolled, setUncontrolled] = React7.useState(defaultValue ?? []);
|
|
965
|
+
const [announcement, setAnnouncement] = React7.useState("");
|
|
966
|
+
const inputRef = React7.useRef(null);
|
|
774
967
|
const raw = value ?? uncontrolled;
|
|
775
968
|
const contentKey = raw.join("\0");
|
|
776
|
-
const values =
|
|
969
|
+
const values = React7.useMemo(() => raw, [contentKey]);
|
|
777
970
|
const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
|
|
778
971
|
const isEditable = !rest.isDisabled && !rest.isReadOnly;
|
|
779
972
|
const commit = (next) => {
|
|
@@ -806,7 +999,7 @@ function MultiComboBox({
|
|
|
806
999
|
e.stopPropagation();
|
|
807
1000
|
if (!values.includes(next)) commit([...values, next]);
|
|
808
1001
|
};
|
|
809
|
-
return /* @__PURE__ */
|
|
1002
|
+
return /* @__PURE__ */ jsxs16(
|
|
810
1003
|
AriaComboBox2,
|
|
811
1004
|
{
|
|
812
1005
|
className: cx("pire-field", className),
|
|
@@ -820,11 +1013,11 @@ function MultiComboBox({
|
|
|
820
1013
|
validationBehavior: "aria",
|
|
821
1014
|
...rest,
|
|
822
1015
|
children: [
|
|
823
|
-
label ? /* @__PURE__ */
|
|
1016
|
+
label ? /* @__PURE__ */ jsxs16(Label6, { className: "pire-field-label", children: [
|
|
824
1017
|
label,
|
|
825
|
-
rest.isRequired ? /* @__PURE__ */
|
|
1018
|
+
rest.isRequired ? /* @__PURE__ */ jsx23("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
826
1019
|
] }) : null,
|
|
827
|
-
/* @__PURE__ */
|
|
1020
|
+
/* @__PURE__ */ jsxs16(
|
|
828
1021
|
Group4,
|
|
829
1022
|
{
|
|
830
1023
|
className: "pire-control",
|
|
@@ -834,14 +1027,14 @@ function MultiComboBox({
|
|
|
834
1027
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
835
1028
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
836
1029
|
children: [
|
|
837
|
-
/* @__PURE__ */
|
|
838
|
-
/* @__PURE__ */
|
|
839
|
-
/* @__PURE__ */
|
|
1030
|
+
/* @__PURE__ */ jsx23(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
|
|
1031
|
+
/* @__PURE__ */ jsxs16("div", { className: "pire-chipfield", children: [
|
|
1032
|
+
/* @__PURE__ */ jsx23(ButtonContext.Provider, { value: null, children: values.map((v) => (
|
|
840
1033
|
/* Disabled follows the field, not `isEditable`: a read-only field's chips are
|
|
841
1034
|
real, current values and should read as such — they simply lose the × . */
|
|
842
|
-
/* @__PURE__ */
|
|
1035
|
+
/* @__PURE__ */ jsx23(Tag, { isDisabled: rest.isDisabled, onRemove: isEditable ? () => remove(v) : void 0, children: labelOf(v) }, v)
|
|
843
1036
|
)) }),
|
|
844
|
-
/* @__PURE__ */
|
|
1037
|
+
/* @__PURE__ */ jsx23(
|
|
845
1038
|
AriaInput3,
|
|
846
1039
|
{
|
|
847
1040
|
ref: inputRef,
|
|
@@ -851,16 +1044,16 @@ function MultiComboBox({
|
|
|
851
1044
|
}
|
|
852
1045
|
)
|
|
853
1046
|
] }),
|
|
854
|
-
/* @__PURE__ */
|
|
1047
|
+
/* @__PURE__ */ jsx23(AriaButton6, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx23(Icon, { name: "chevron-down", size: 16 }) })
|
|
855
1048
|
]
|
|
856
1049
|
}
|
|
857
1050
|
),
|
|
858
|
-
/* @__PURE__ */
|
|
859
|
-
description ? /* @__PURE__ */
|
|
860
|
-
/* @__PURE__ */
|
|
861
|
-
/* @__PURE__ */
|
|
862
|
-
/* @__PURE__ */
|
|
863
|
-
item.secondary ? /* @__PURE__ */
|
|
1051
|
+
/* @__PURE__ */ jsx23(VisuallyHidden, { children: /* @__PURE__ */ jsx23("span", { "aria-live": "polite", children: announcement }) }),
|
|
1052
|
+
description ? /* @__PURE__ */ jsx23(Text7, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1053
|
+
/* @__PURE__ */ jsx23(FieldError6, { className: "pire-field-error", children: errorMessage }),
|
|
1054
|
+
/* @__PURE__ */ jsx23(Popover3, { className: "pire-popover", children: /* @__PURE__ */ jsx23(ListBox3, { className: "pire-listbox", children: (item) => /* @__PURE__ */ jsxs16(ListBoxItem3, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
|
|
1055
|
+
/* @__PURE__ */ jsx23("span", { style: { flex: 1 }, children: item.label }),
|
|
1056
|
+
item.secondary ? /* @__PURE__ */ jsx23("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
|
|
864
1057
|
] }) }) })
|
|
865
1058
|
]
|
|
866
1059
|
}
|
|
@@ -874,10 +1067,10 @@ import {
|
|
|
874
1067
|
Input as AriaInput4,
|
|
875
1068
|
Group as Group5,
|
|
876
1069
|
Button as AriaButton7,
|
|
877
|
-
Text as
|
|
1070
|
+
Text as Text8,
|
|
878
1071
|
FieldError as FieldError7
|
|
879
1072
|
} from "react-aria-components";
|
|
880
|
-
import { jsx as
|
|
1073
|
+
import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
881
1074
|
function NumberField({
|
|
882
1075
|
label,
|
|
883
1076
|
suffix,
|
|
@@ -890,12 +1083,13 @@ function NumberField({
|
|
|
890
1083
|
style,
|
|
891
1084
|
...rest
|
|
892
1085
|
}) {
|
|
893
|
-
|
|
894
|
-
|
|
1086
|
+
const msg = usePireMessages();
|
|
1087
|
+
return /* @__PURE__ */ jsxs17(AriaNumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
|
|
1088
|
+
label ? /* @__PURE__ */ jsxs17(Label7, { className: "pire-field-label", children: [
|
|
895
1089
|
label,
|
|
896
|
-
rest.isRequired ? /* @__PURE__ */
|
|
1090
|
+
rest.isRequired ? /* @__PURE__ */ jsx24("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
897
1091
|
] }) : null,
|
|
898
|
-
/* @__PURE__ */
|
|
1092
|
+
/* @__PURE__ */ jsxs17(
|
|
899
1093
|
Group5,
|
|
900
1094
|
{
|
|
901
1095
|
className: "pire-control",
|
|
@@ -904,17 +1098,17 @@ function NumberField({
|
|
|
904
1098
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
905
1099
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
906
1100
|
children: [
|
|
907
|
-
/* @__PURE__ */
|
|
908
|
-
suffix ? /* @__PURE__ */
|
|
909
|
-
hideStepper ? null : /* @__PURE__ */
|
|
910
|
-
/* @__PURE__ */
|
|
911
|
-
/* @__PURE__ */
|
|
1101
|
+
/* @__PURE__ */ jsx24(AriaInput4, { className: "pire-input", "data-numeric": "true" }),
|
|
1102
|
+
suffix ? /* @__PURE__ */ jsx24("span", { className: "pire-affix", children: suffix }) : null,
|
|
1103
|
+
hideStepper ? null : /* @__PURE__ */ jsxs17("span", { className: "pire-stepper", children: [
|
|
1104
|
+
/* @__PURE__ */ jsx24(AriaButton7, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ jsx24(Icon, { name: "plus", size: 10 }) }),
|
|
1105
|
+
/* @__PURE__ */ jsx24(AriaButton7, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx24(Icon, { name: "minus", size: 10 }) })
|
|
912
1106
|
] })
|
|
913
1107
|
]
|
|
914
1108
|
}
|
|
915
1109
|
),
|
|
916
|
-
description ? /* @__PURE__ */
|
|
917
|
-
/* @__PURE__ */
|
|
1110
|
+
description ? /* @__PURE__ */ jsx24(Text8, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1111
|
+
/* @__PURE__ */ jsx24(FieldError7, { className: "pire-field-error", children: errorMessage })
|
|
918
1112
|
] });
|
|
919
1113
|
}
|
|
920
1114
|
|
|
@@ -934,11 +1128,11 @@ import {
|
|
|
934
1128
|
CalendarHeaderCell,
|
|
935
1129
|
CalendarGridBody,
|
|
936
1130
|
CalendarCell,
|
|
937
|
-
Heading,
|
|
938
|
-
Text as
|
|
1131
|
+
Heading as Heading2,
|
|
1132
|
+
Text as Text9,
|
|
939
1133
|
FieldError as FieldError8
|
|
940
1134
|
} from "react-aria-components";
|
|
941
|
-
import { jsx as
|
|
1135
|
+
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
942
1136
|
function DatePicker({
|
|
943
1137
|
label,
|
|
944
1138
|
description,
|
|
@@ -949,12 +1143,13 @@ function DatePicker({
|
|
|
949
1143
|
style,
|
|
950
1144
|
...rest
|
|
951
1145
|
}) {
|
|
952
|
-
|
|
953
|
-
|
|
1146
|
+
const msg = usePireMessages();
|
|
1147
|
+
return /* @__PURE__ */ jsxs18(AriaDatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
|
|
1148
|
+
label ? /* @__PURE__ */ jsxs18(Label8, { className: "pire-field-label", children: [
|
|
954
1149
|
label,
|
|
955
|
-
rest.isRequired ? /* @__PURE__ */
|
|
1150
|
+
rest.isRequired ? /* @__PURE__ */ jsx25("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
956
1151
|
] }) : null,
|
|
957
|
-
/* @__PURE__ */
|
|
1152
|
+
/* @__PURE__ */ jsxs18(
|
|
958
1153
|
Group6,
|
|
959
1154
|
{
|
|
960
1155
|
className: "pire-control",
|
|
@@ -963,36 +1158,36 @@ function DatePicker({
|
|
|
963
1158
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
964
1159
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
965
1160
|
children: [
|
|
966
|
-
/* @__PURE__ */
|
|
967
|
-
/* @__PURE__ */
|
|
1161
|
+
/* @__PURE__ */ jsx25(DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx25(DateSegment, { segment, className: "pire-datesegment" }) }),
|
|
1162
|
+
/* @__PURE__ */ jsx25(AriaButton8, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ jsx25(Icon, { name: "calendar", size: 16 }) })
|
|
968
1163
|
]
|
|
969
1164
|
}
|
|
970
1165
|
),
|
|
971
|
-
description ? /* @__PURE__ */
|
|
972
|
-
/* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
/* @__PURE__ */
|
|
976
|
-
/* @__PURE__ */
|
|
977
|
-
/* @__PURE__ */
|
|
1166
|
+
description ? /* @__PURE__ */ jsx25(Text9, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
1167
|
+
/* @__PURE__ */ jsx25(FieldError8, { className: "pire-field-error", children: errorMessage }),
|
|
1168
|
+
/* @__PURE__ */ jsx25(Popover4, { className: "pire-popover", children: /* @__PURE__ */ jsx25(AriaDialog, { children: /* @__PURE__ */ jsxs18(Calendar, { className: "pire-calendar", children: [
|
|
1169
|
+
/* @__PURE__ */ jsxs18("header", { className: "pire-calendar-head", children: [
|
|
1170
|
+
/* @__PURE__ */ jsx25(AriaButton8, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ jsx25(Icon, { name: "chevron-left", size: 16 }) }),
|
|
1171
|
+
/* @__PURE__ */ jsx25(Heading2, { className: "pire-calendar-title" }),
|
|
1172
|
+
/* @__PURE__ */ jsx25(AriaButton8, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ jsx25(Icon, { name: "chevron-right", size: 16 }) })
|
|
978
1173
|
] }),
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
981
|
-
/* @__PURE__ */
|
|
1174
|
+
/* @__PURE__ */ jsxs18(CalendarGrid, { className: "pire-calendar-grid", children: [
|
|
1175
|
+
/* @__PURE__ */ jsx25(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx25(CalendarHeaderCell, { children: day }) }),
|
|
1176
|
+
/* @__PURE__ */ jsx25(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx25(CalendarCell, { date, className: "pire-calendar-cell" }) })
|
|
982
1177
|
] })
|
|
983
1178
|
] }) }) })
|
|
984
1179
|
] });
|
|
985
1180
|
}
|
|
986
1181
|
|
|
987
1182
|
// src/components/forms/ValueHelpField.tsx
|
|
988
|
-
import * as
|
|
1183
|
+
import * as React9 from "react";
|
|
989
1184
|
|
|
990
1185
|
// src/components/patterns/ValueHelpDialog.tsx
|
|
991
|
-
import * as
|
|
1186
|
+
import * as React8 from "react";
|
|
992
1187
|
|
|
993
1188
|
// src/components/feedback/Dialog.tsx
|
|
994
|
-
import { ModalOverlay, Modal, Dialog as AriaDialog2, Heading as
|
|
995
|
-
import { jsx as
|
|
1189
|
+
import { ModalOverlay, Modal, Dialog as AriaDialog2, Heading as Heading3 } from "react-aria-components";
|
|
1190
|
+
import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
996
1191
|
function Dialog({
|
|
997
1192
|
isOpen,
|
|
998
1193
|
onOpenChange,
|
|
@@ -1007,11 +1202,12 @@ function Dialog({
|
|
|
1007
1202
|
className,
|
|
1008
1203
|
style
|
|
1009
1204
|
}) {
|
|
1205
|
+
const msg = usePireMessages();
|
|
1010
1206
|
const close = () => {
|
|
1011
1207
|
onClose?.();
|
|
1012
1208
|
onOpenChange?.(false);
|
|
1013
1209
|
};
|
|
1014
|
-
return /* @__PURE__ */
|
|
1210
|
+
return /* @__PURE__ */ jsx26(
|
|
1015
1211
|
ModalOverlay,
|
|
1016
1212
|
{
|
|
1017
1213
|
className: "pire-modal-overlay",
|
|
@@ -1020,16 +1216,16 @@ function Dialog({
|
|
|
1020
1216
|
onOpenChange: (o) => {
|
|
1021
1217
|
if (!o) close();
|
|
1022
1218
|
},
|
|
1023
|
-
children: /* @__PURE__ */
|
|
1024
|
-
title ? /* @__PURE__ */
|
|
1025
|
-
/* @__PURE__ */
|
|
1026
|
-
/* @__PURE__ */
|
|
1027
|
-
subtitle ? /* @__PURE__ */
|
|
1219
|
+
children: /* @__PURE__ */ jsx26(Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ jsxs19(AriaDialog2, { className: "pire-dialog", children: [
|
|
1220
|
+
title ? /* @__PURE__ */ jsxs19("header", { className: "pire-dialog-head", children: [
|
|
1221
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1222
|
+
/* @__PURE__ */ jsx26(Heading3, { slot: "title", className: "pire-dialog-title", children: title }),
|
|
1223
|
+
subtitle ? /* @__PURE__ */ jsx26("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
|
|
1028
1224
|
] }),
|
|
1029
|
-
showClose ? /* @__PURE__ */
|
|
1225
|
+
showClose ? /* @__PURE__ */ jsx26(IconButton, { icon: "x", label: msg.dialogClose, size: "sm", onPress: close }) : null
|
|
1030
1226
|
] }) : null,
|
|
1031
|
-
/* @__PURE__ */
|
|
1032
|
-
footer ? /* @__PURE__ */
|
|
1227
|
+
/* @__PURE__ */ jsx26("div", { className: "pire-dialog-body", children }),
|
|
1228
|
+
footer ? /* @__PURE__ */ jsx26("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
1033
1229
|
] }) })
|
|
1034
1230
|
}
|
|
1035
1231
|
);
|
|
@@ -1044,7 +1240,7 @@ import {
|
|
|
1044
1240
|
Row,
|
|
1045
1241
|
Cell
|
|
1046
1242
|
} from "react-aria-components";
|
|
1047
|
-
import { jsx as
|
|
1243
|
+
import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1048
1244
|
function DataTable({
|
|
1049
1245
|
columns,
|
|
1050
1246
|
rows,
|
|
@@ -1061,12 +1257,13 @@ function DataTable({
|
|
|
1061
1257
|
style,
|
|
1062
1258
|
...rest
|
|
1063
1259
|
}) {
|
|
1260
|
+
const msg = usePireMessages();
|
|
1064
1261
|
const sortDescriptor = sort ? { column: sort.key, direction: sort.dir === "asc" ? "ascending" : "descending" } : void 0;
|
|
1065
1262
|
const handleSelection = (keys) => {
|
|
1066
1263
|
if (keys === "all") return onSelectionChange?.(rows.map((r) => r.id));
|
|
1067
1264
|
onSelectionChange?.([...keys]);
|
|
1068
1265
|
};
|
|
1069
|
-
return /* @__PURE__ */
|
|
1266
|
+
return /* @__PURE__ */ jsx27("div", { className: cx("pire-table-wrap", className), style, children: /* @__PURE__ */ jsxs20(
|
|
1070
1267
|
Table,
|
|
1071
1268
|
{
|
|
1072
1269
|
className: "pire-table",
|
|
@@ -1083,9 +1280,9 @@ function DataTable({
|
|
|
1083
1280
|
if (row) onRowAction(row);
|
|
1084
1281
|
} : void 0,
|
|
1085
1282
|
children: [
|
|
1086
|
-
/* @__PURE__ */
|
|
1087
|
-
selectable ? /* @__PURE__ */
|
|
1088
|
-
columns.map((c, i) => /* @__PURE__ */
|
|
1283
|
+
/* @__PURE__ */ jsxs20(TableHeader, { className: "pire-thead-row", children: [
|
|
1284
|
+
selectable ? /* @__PURE__ */ jsx27(Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ jsx27(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectAll }) }) : null,
|
|
1285
|
+
columns.map((c, i) => /* @__PURE__ */ jsx27(
|
|
1089
1286
|
Column,
|
|
1090
1287
|
{
|
|
1091
1288
|
id: c.key,
|
|
@@ -1095,9 +1292,9 @@ function DataTable({
|
|
|
1095
1292
|
width: c.width,
|
|
1096
1293
|
"data-align": c.numeric || c.align === "right" ? "right" : c.align,
|
|
1097
1294
|
"data-allows-sorting": c.sortable ? "true" : void 0,
|
|
1098
|
-
children: /* @__PURE__ */
|
|
1295
|
+
children: /* @__PURE__ */ jsxs20("span", { className: "pire-th-inner", children: [
|
|
1099
1296
|
c.label,
|
|
1100
|
-
c.sortable ? /* @__PURE__ */
|
|
1297
|
+
c.sortable ? /* @__PURE__ */ jsx27(
|
|
1101
1298
|
Icon,
|
|
1102
1299
|
{
|
|
1103
1300
|
size: 12,
|
|
@@ -1110,9 +1307,9 @@ function DataTable({
|
|
|
1110
1307
|
c.key
|
|
1111
1308
|
))
|
|
1112
1309
|
] }),
|
|
1113
|
-
/* @__PURE__ */
|
|
1114
|
-
selectable ? /* @__PURE__ */
|
|
1115
|
-
columns.map((c) => /* @__PURE__ */
|
|
1310
|
+
/* @__PURE__ */ jsx27(TableBody, { renderEmptyState: () => /* @__PURE__ */ jsx27("div", { className: "pire-table-empty", children: emptyLabel }), children: rows.map((row) => /* @__PURE__ */ jsxs20(Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
|
|
1311
|
+
selectable ? /* @__PURE__ */ jsx27(Cell, { className: "pire-td", children: /* @__PURE__ */ jsx27(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
|
|
1312
|
+
columns.map((c) => /* @__PURE__ */ jsx27(
|
|
1116
1313
|
Cell,
|
|
1117
1314
|
{
|
|
1118
1315
|
className: "pire-td",
|
|
@@ -1129,7 +1326,7 @@ function DataTable({
|
|
|
1129
1326
|
}
|
|
1130
1327
|
|
|
1131
1328
|
// src/components/patterns/ValueHelpDialog.tsx
|
|
1132
|
-
import { jsx as
|
|
1329
|
+
import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1133
1330
|
function ValueHelpDialog({
|
|
1134
1331
|
isOpen,
|
|
1135
1332
|
title = "Select a record",
|
|
@@ -1140,28 +1337,29 @@ function ValueHelpDialog({
|
|
|
1140
1337
|
onSelect,
|
|
1141
1338
|
onClose
|
|
1142
1339
|
}) {
|
|
1143
|
-
const
|
|
1144
|
-
|
|
1340
|
+
const msg = usePireMessages();
|
|
1341
|
+
const [query, setQuery] = React8.useState("");
|
|
1342
|
+
React8.useEffect(() => {
|
|
1145
1343
|
if (isOpen) setQuery("");
|
|
1146
1344
|
}, [isOpen]);
|
|
1147
|
-
const filtered =
|
|
1345
|
+
const filtered = React8.useMemo(() => {
|
|
1148
1346
|
const q = query.trim().toLowerCase();
|
|
1149
1347
|
if (!q) return rows;
|
|
1150
1348
|
return rows.filter((row) => Object.values(row).some((v) => String(v).toLowerCase().includes(q)));
|
|
1151
1349
|
}, [rows, query]);
|
|
1152
|
-
return /* @__PURE__ */
|
|
1350
|
+
return /* @__PURE__ */ jsx28(
|
|
1153
1351
|
Dialog,
|
|
1154
1352
|
{
|
|
1155
1353
|
isOpen,
|
|
1156
1354
|
size: "lg",
|
|
1157
1355
|
title,
|
|
1158
1356
|
onClose,
|
|
1159
|
-
footer: /* @__PURE__ */
|
|
1160
|
-
children: /* @__PURE__ */
|
|
1161
|
-
/* @__PURE__ */
|
|
1357
|
+
footer: /* @__PURE__ */ jsx28(Button, { variant: "tertiary", onPress: onClose, children: msg.valueHelpDialogCancel }),
|
|
1358
|
+
children: /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
|
|
1359
|
+
/* @__PURE__ */ jsx28(
|
|
1162
1360
|
Input,
|
|
1163
1361
|
{
|
|
1164
|
-
"aria-label":
|
|
1362
|
+
"aria-label": msg.valueHelpDialogSearch,
|
|
1165
1363
|
icon: "search",
|
|
1166
1364
|
type: "search",
|
|
1167
1365
|
value: query,
|
|
@@ -1170,7 +1368,7 @@ function ValueHelpDialog({
|
|
|
1170
1368
|
autoFocus: true
|
|
1171
1369
|
}
|
|
1172
1370
|
),
|
|
1173
|
-
/* @__PURE__ */
|
|
1371
|
+
/* @__PURE__ */ jsx28(
|
|
1174
1372
|
DataTable,
|
|
1175
1373
|
{
|
|
1176
1374
|
"aria-label": typeof title === "string" ? title : "Records",
|
|
@@ -1190,7 +1388,7 @@ function ValueHelpDialog({
|
|
|
1190
1388
|
}
|
|
1191
1389
|
|
|
1192
1390
|
// src/components/forms/ValueHelpField.tsx
|
|
1193
|
-
import { jsx as
|
|
1391
|
+
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1194
1392
|
var defaultFormat = (row) => [row.id, row.name ?? row.label ?? row.text].filter(Boolean).join(" \u2014 ");
|
|
1195
1393
|
function ValueHelpField({
|
|
1196
1394
|
label,
|
|
@@ -1210,10 +1408,11 @@ function ValueHelpField({
|
|
|
1210
1408
|
className,
|
|
1211
1409
|
style
|
|
1212
1410
|
}) {
|
|
1213
|
-
const
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1411
|
+
const msg = usePireMessages();
|
|
1412
|
+
const [open, setOpen] = React9.useState(false);
|
|
1413
|
+
return /* @__PURE__ */ jsxs22("div", { className: cx(className), style, children: [
|
|
1414
|
+
/* @__PURE__ */ jsxs22("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
|
|
1415
|
+
/* @__PURE__ */ jsx29(
|
|
1217
1416
|
Input,
|
|
1218
1417
|
{
|
|
1219
1418
|
label,
|
|
@@ -1227,28 +1426,28 @@ function ValueHelpField({
|
|
|
1227
1426
|
errorMessage
|
|
1228
1427
|
}
|
|
1229
1428
|
),
|
|
1230
|
-
allowsClear && value ? /* @__PURE__ */
|
|
1429
|
+
allowsClear && value ? /* @__PURE__ */ jsx29(
|
|
1231
1430
|
IconButton,
|
|
1232
1431
|
{
|
|
1233
1432
|
icon: "x",
|
|
1234
|
-
label:
|
|
1433
|
+
label: msg.valueHelpFieldClear,
|
|
1235
1434
|
variant: "outlined",
|
|
1236
1435
|
isDisabled,
|
|
1237
1436
|
onPress: () => onChange?.(null)
|
|
1238
1437
|
}
|
|
1239
1438
|
) : null,
|
|
1240
|
-
/* @__PURE__ */
|
|
1439
|
+
/* @__PURE__ */ jsx29(
|
|
1241
1440
|
IconButton,
|
|
1242
1441
|
{
|
|
1243
1442
|
icon: "search",
|
|
1244
|
-
label: typeof label === "string" ?
|
|
1443
|
+
label: typeof label === "string" ? msg.valueHelpFieldOpenNamed.replace("{label}", label.toLowerCase()) : msg.valueHelpFieldOpen,
|
|
1245
1444
|
variant: "outlined",
|
|
1246
1445
|
isDisabled,
|
|
1247
1446
|
onPress: () => setOpen(true)
|
|
1248
1447
|
}
|
|
1249
1448
|
)
|
|
1250
1449
|
] }),
|
|
1251
|
-
/* @__PURE__ */
|
|
1450
|
+
/* @__PURE__ */ jsx29(
|
|
1252
1451
|
ValueHelpDialog,
|
|
1253
1452
|
{
|
|
1254
1453
|
isOpen: open,
|
|
@@ -1263,7 +1462,7 @@ function ValueHelpField({
|
|
|
1263
1462
|
}
|
|
1264
1463
|
|
|
1265
1464
|
// src/components/navigation/ShellBar.tsx
|
|
1266
|
-
import { jsx as
|
|
1465
|
+
import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1267
1466
|
var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
|
|
1268
1467
|
function ShellBar({
|
|
1269
1468
|
product,
|
|
@@ -1278,22 +1477,22 @@ function ShellBar({
|
|
|
1278
1477
|
className,
|
|
1279
1478
|
...rest
|
|
1280
1479
|
}) {
|
|
1281
|
-
return /* @__PURE__ */
|
|
1282
|
-
onMenu ? /* @__PURE__ */
|
|
1283
|
-
monogram ? /* @__PURE__ */
|
|
1284
|
-
product ? /* @__PURE__ */
|
|
1285
|
-
title ? /* @__PURE__ */
|
|
1286
|
-
/* @__PURE__ */
|
|
1287
|
-
onSearch ? /* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ jsxs23("header", { className: cx("pire-shellbar", className), ...rest, children: [
|
|
1481
|
+
onMenu ? /* @__PURE__ */ jsx30(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
|
|
1482
|
+
monogram ? /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
|
|
1483
|
+
product ? /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-product", children: product }) : null,
|
|
1484
|
+
title ? /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-title", children: title }) : null,
|
|
1485
|
+
/* @__PURE__ */ jsx30("span", { className: "pire-shellbar-spacer" }),
|
|
1486
|
+
onSearch ? /* @__PURE__ */ jsx30(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
|
|
1288
1487
|
actions,
|
|
1289
|
-
user ? /* @__PURE__ */
|
|
1488
|
+
user ? /* @__PURE__ */ jsx30("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
|
|
1290
1489
|
] });
|
|
1291
1490
|
}
|
|
1292
1491
|
|
|
1293
1492
|
// src/components/navigation/SideNav.tsx
|
|
1294
|
-
import * as
|
|
1493
|
+
import * as React10 from "react";
|
|
1295
1494
|
import { Button as AriaButton9, Disclosure, DisclosureGroup, DisclosurePanel } from "react-aria-components";
|
|
1296
|
-
import { jsx as
|
|
1495
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1297
1496
|
function findActiveParent(groups, value) {
|
|
1298
1497
|
if (value == null) return void 0;
|
|
1299
1498
|
for (const group of groups) {
|
|
@@ -1315,12 +1514,13 @@ function SideNav({
|
|
|
1315
1514
|
className,
|
|
1316
1515
|
...rest
|
|
1317
1516
|
}) {
|
|
1517
|
+
const msg = usePireMessages();
|
|
1318
1518
|
const activeParent = findActiveParent(groups, value);
|
|
1319
1519
|
const isControlled = expandedIds != null;
|
|
1320
|
-
const [ownExpanded, setOwnExpanded] =
|
|
1520
|
+
const [ownExpanded, setOwnExpanded] = React10.useState(
|
|
1321
1521
|
() => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
|
|
1322
1522
|
);
|
|
1323
|
-
const [lastValue, setLastValue] =
|
|
1523
|
+
const [lastValue, setLastValue] = React10.useState(value);
|
|
1324
1524
|
if (value !== lastValue) {
|
|
1325
1525
|
setLastValue(value);
|
|
1326
1526
|
if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
|
|
@@ -1340,7 +1540,7 @@ function SideNav({
|
|
|
1340
1540
|
};
|
|
1341
1541
|
const renderRow = (item, onPress, isGroup) => {
|
|
1342
1542
|
const selected = !isGroup && item.id === value;
|
|
1343
|
-
const button = /* @__PURE__ */
|
|
1543
|
+
const button = /* @__PURE__ */ jsxs24(
|
|
1344
1544
|
AriaButton9,
|
|
1345
1545
|
{
|
|
1346
1546
|
className: "pire-sidenav-item",
|
|
@@ -1350,17 +1550,17 @@ function SideNav({
|
|
|
1350
1550
|
"aria-label": collapsed ? item.label : void 0,
|
|
1351
1551
|
onPress,
|
|
1352
1552
|
children: [
|
|
1353
|
-
item.icon ? /* @__PURE__ */
|
|
1354
|
-
collapsed ? null : /* @__PURE__ */
|
|
1355
|
-
item.count != null && !collapsed ? /* @__PURE__ */
|
|
1553
|
+
item.icon ? /* @__PURE__ */ jsx31(Icon, { name: item.icon, size: 16 }) : null,
|
|
1554
|
+
collapsed ? null : /* @__PURE__ */ jsx31("span", { children: item.label }),
|
|
1555
|
+
item.count != null && !collapsed ? /* @__PURE__ */ jsx31("span", { className: "pire-sidenav-count", children: item.count }) : null
|
|
1356
1556
|
]
|
|
1357
1557
|
},
|
|
1358
1558
|
item.id
|
|
1359
1559
|
);
|
|
1360
|
-
return collapsed ? /* @__PURE__ */
|
|
1560
|
+
return collapsed ? /* @__PURE__ */ jsx31(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
|
|
1361
1561
|
};
|
|
1362
|
-
const renderSection = (item) => /* @__PURE__ */
|
|
1363
|
-
/* @__PURE__ */
|
|
1562
|
+
const renderSection = (item) => /* @__PURE__ */ jsxs24(Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
|
|
1563
|
+
/* @__PURE__ */ jsxs24(
|
|
1364
1564
|
AriaButton9,
|
|
1365
1565
|
{
|
|
1366
1566
|
slot: "trigger",
|
|
@@ -1368,16 +1568,16 @@ function SideNav({
|
|
|
1368
1568
|
"data-kind": "group",
|
|
1369
1569
|
"data-active-child": item.id === activeParent ? "true" : void 0,
|
|
1370
1570
|
children: [
|
|
1371
|
-
item.icon ? /* @__PURE__ */
|
|
1372
|
-
/* @__PURE__ */
|
|
1373
|
-
item.count != null ? /* @__PURE__ */
|
|
1374
|
-
/* @__PURE__ */
|
|
1571
|
+
item.icon ? /* @__PURE__ */ jsx31(Icon, { name: item.icon, size: 16 }) : null,
|
|
1572
|
+
/* @__PURE__ */ jsx31("span", { children: item.label }),
|
|
1573
|
+
item.count != null ? /* @__PURE__ */ jsx31("span", { className: "pire-sidenav-count", children: item.count }) : null,
|
|
1574
|
+
/* @__PURE__ */ jsx31(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
|
|
1375
1575
|
]
|
|
1376
1576
|
}
|
|
1377
1577
|
),
|
|
1378
|
-
/* @__PURE__ */
|
|
1578
|
+
/* @__PURE__ */ jsx31(DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
|
|
1379
1579
|
const selected = child.id === value;
|
|
1380
|
-
return /* @__PURE__ */
|
|
1580
|
+
return /* @__PURE__ */ jsxs24(
|
|
1381
1581
|
AriaButton9,
|
|
1382
1582
|
{
|
|
1383
1583
|
className: "pire-sidenav-item pire-sidenav-subitem",
|
|
@@ -1385,20 +1585,20 @@ function SideNav({
|
|
|
1385
1585
|
"aria-current": selected ? "page" : void 0,
|
|
1386
1586
|
onPress: () => onChange?.(child.id),
|
|
1387
1587
|
children: [
|
|
1388
|
-
/* @__PURE__ */
|
|
1389
|
-
child.count != null ? /* @__PURE__ */
|
|
1588
|
+
/* @__PURE__ */ jsx31("span", { children: child.label }),
|
|
1589
|
+
child.count != null ? /* @__PURE__ */ jsx31("span", { className: "pire-sidenav-count", children: child.count }) : null
|
|
1390
1590
|
]
|
|
1391
1591
|
},
|
|
1392
1592
|
child.id
|
|
1393
1593
|
);
|
|
1394
1594
|
}) })
|
|
1395
1595
|
] }, item.id);
|
|
1396
|
-
return /* @__PURE__ */
|
|
1596
|
+
return /* @__PURE__ */ jsxs24(
|
|
1397
1597
|
"nav",
|
|
1398
1598
|
{
|
|
1399
1599
|
className: cx("pire-sidenav", className),
|
|
1400
1600
|
"data-collapsed": collapsed ? "true" : void 0,
|
|
1401
|
-
"aria-label":
|
|
1601
|
+
"aria-label": msg.sideNavLabel,
|
|
1402
1602
|
...rest,
|
|
1403
1603
|
children: [
|
|
1404
1604
|
groups.map((group, gi) => {
|
|
@@ -1408,9 +1608,9 @@ function SideNav({
|
|
|
1408
1608
|
if (isGroup && !collapsed) return renderSection(item);
|
|
1409
1609
|
return renderRow(item, () => isGroup ? toggleExpanded(item.id) : onChange?.(item.id), isGroup);
|
|
1410
1610
|
});
|
|
1411
|
-
return /* @__PURE__ */
|
|
1412
|
-
group.label && !collapsed ? /* @__PURE__ */
|
|
1413
|
-
hasSections ? /* @__PURE__ */
|
|
1611
|
+
return /* @__PURE__ */ jsxs24("div", { className: "pire-sidenav-group", children: [
|
|
1612
|
+
group.label && !collapsed ? /* @__PURE__ */ jsx31("div", { className: "pire-sidenav-label", children: group.label }) : null,
|
|
1613
|
+
hasSections ? /* @__PURE__ */ jsx31(
|
|
1414
1614
|
DisclosureGroup,
|
|
1415
1615
|
{
|
|
1416
1616
|
className: "pire-sidenav-tree",
|
|
@@ -1422,7 +1622,7 @@ function SideNav({
|
|
|
1422
1622
|
) : rows
|
|
1423
1623
|
] }, group.label ?? gi);
|
|
1424
1624
|
}),
|
|
1425
|
-
footer ? /* @__PURE__ */
|
|
1625
|
+
footer ? /* @__PURE__ */ jsx31("div", { className: "pire-sidenav-footer", children: footer }) : null
|
|
1426
1626
|
]
|
|
1427
1627
|
}
|
|
1428
1628
|
);
|
|
@@ -1430,9 +1630,9 @@ function SideNav({
|
|
|
1430
1630
|
|
|
1431
1631
|
// src/components/navigation/Tabs.tsx
|
|
1432
1632
|
import { Tabs as AriaTabs, TabList, Tab as AriaTab, TabPanel } from "react-aria-components";
|
|
1433
|
-
import { jsx as
|
|
1633
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1434
1634
|
function Tabs({ items, value, defaultValue, onChange, panels, className, style, ...rest }) {
|
|
1435
|
-
return /* @__PURE__ */
|
|
1635
|
+
return /* @__PURE__ */ jsxs25(
|
|
1436
1636
|
AriaTabs,
|
|
1437
1637
|
{
|
|
1438
1638
|
className,
|
|
@@ -1441,22 +1641,22 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
|
|
|
1441
1641
|
defaultSelectedKey: defaultValue,
|
|
1442
1642
|
onSelectionChange: (k) => onChange?.(String(k)),
|
|
1443
1643
|
children: [
|
|
1444
|
-
/* @__PURE__ */
|
|
1445
|
-
item.icon ? /* @__PURE__ */
|
|
1644
|
+
/* @__PURE__ */ jsx32(TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ jsxs25(AriaTab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
|
|
1645
|
+
item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: 16 }) : null,
|
|
1446
1646
|
item.label,
|
|
1447
|
-
item.count != null ? /* @__PURE__ */
|
|
1647
|
+
item.count != null ? /* @__PURE__ */ jsx32("span", { className: "pire-tab-count", children: item.count }) : null
|
|
1448
1648
|
] }) }),
|
|
1449
|
-
items.map((item) => /* @__PURE__ */
|
|
1649
|
+
items.map((item) => /* @__PURE__ */ jsx32(TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
|
|
1450
1650
|
]
|
|
1451
1651
|
}
|
|
1452
1652
|
);
|
|
1453
1653
|
}
|
|
1454
1654
|
|
|
1455
1655
|
// src/components/navigation/Breadcrumb.tsx
|
|
1456
|
-
import { Breadcrumbs as AriaBreadcrumbs, Breadcrumb as AriaBreadcrumb, Link } from "react-aria-components";
|
|
1457
|
-
import { jsx as
|
|
1656
|
+
import { Breadcrumbs as AriaBreadcrumbs, Breadcrumb as AriaBreadcrumb, Link as Link2 } from "react-aria-components";
|
|
1657
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1458
1658
|
function Breadcrumb({ items, onNavigate, className, style }) {
|
|
1459
|
-
return /* @__PURE__ */
|
|
1659
|
+
return /* @__PURE__ */ jsx33(
|
|
1460
1660
|
AriaBreadcrumbs,
|
|
1461
1661
|
{
|
|
1462
1662
|
className: cx("pire-breadcrumbs", className),
|
|
@@ -1465,9 +1665,9 @@ function Breadcrumb({ items, onNavigate, className, style }) {
|
|
|
1465
1665
|
onAction: (key) => onNavigate?.(String(key)),
|
|
1466
1666
|
children: (item) => {
|
|
1467
1667
|
const last = items[items.length - 1] === item;
|
|
1468
|
-
return /* @__PURE__ */
|
|
1469
|
-
last ? item.label : /* @__PURE__ */
|
|
1470
|
-
last ? null : /* @__PURE__ */
|
|
1668
|
+
return /* @__PURE__ */ jsxs26(AriaBreadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
|
|
1669
|
+
last ? item.label : /* @__PURE__ */ jsx33(Link2, { href: item.href, children: item.label }),
|
|
1670
|
+
last ? null : /* @__PURE__ */ jsx33(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
|
|
1471
1671
|
] });
|
|
1472
1672
|
}
|
|
1473
1673
|
}
|
|
@@ -1475,7 +1675,7 @@ function Breadcrumb({ items, onNavigate, className, style }) {
|
|
|
1475
1675
|
}
|
|
1476
1676
|
|
|
1477
1677
|
// src/components/navigation/Pagination.tsx
|
|
1478
|
-
import { jsx as
|
|
1678
|
+
import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1479
1679
|
function Pagination({
|
|
1480
1680
|
page = 1,
|
|
1481
1681
|
pageSize = 25,
|
|
@@ -1486,49 +1686,39 @@ function Pagination({
|
|
|
1486
1686
|
className,
|
|
1487
1687
|
style
|
|
1488
1688
|
}) {
|
|
1689
|
+
const msg = usePireMessages();
|
|
1489
1690
|
const pages = Math.max(1, Math.ceil(total / pageSize));
|
|
1490
1691
|
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
|
|
1491
1692
|
const to = Math.min(total, page * pageSize);
|
|
1492
|
-
return /* @__PURE__ */
|
|
1493
|
-
/* @__PURE__ */
|
|
1494
|
-
|
|
1495
|
-
"\u2013",
|
|
1496
|
-
to.toLocaleString(),
|
|
1497
|
-
" of ",
|
|
1498
|
-
total.toLocaleString()
|
|
1499
|
-
] }),
|
|
1500
|
-
/* @__PURE__ */ jsx29(
|
|
1693
|
+
return /* @__PURE__ */ jsxs27("nav", { className: cx("pire-pagination", className), style, "aria-label": msg.paginationLabel, children: [
|
|
1694
|
+
/* @__PURE__ */ jsx34("span", { className: "pire-pagination-count", children: msg.paginationRange.replace("{from}", from.toLocaleString()).replace("{to}", to.toLocaleString()).replace("{total}", total.toLocaleString()) }),
|
|
1695
|
+
/* @__PURE__ */ jsx34(
|
|
1501
1696
|
IconButton,
|
|
1502
1697
|
{
|
|
1503
1698
|
icon: "chevron-left",
|
|
1504
|
-
label:
|
|
1699
|
+
label: msg.paginationPrevious,
|
|
1505
1700
|
size: "sm",
|
|
1506
1701
|
variant: "outlined",
|
|
1507
1702
|
isDisabled: page <= 1,
|
|
1508
1703
|
onPress: () => onPageChange?.(page - 1)
|
|
1509
1704
|
}
|
|
1510
1705
|
),
|
|
1511
|
-
/* @__PURE__ */
|
|
1512
|
-
|
|
1513
|
-
page,
|
|
1514
|
-
" of ",
|
|
1515
|
-
pages
|
|
1516
|
-
] }),
|
|
1517
|
-
/* @__PURE__ */ jsx29(
|
|
1706
|
+
/* @__PURE__ */ jsx34("span", { className: "pire-pagination-count", "aria-live": "polite", children: msg.paginationPageOf.replace("{page}", String(page)).replace("{pages}", String(pages)) }),
|
|
1707
|
+
/* @__PURE__ */ jsx34(
|
|
1518
1708
|
IconButton,
|
|
1519
1709
|
{
|
|
1520
1710
|
icon: "chevron-right",
|
|
1521
|
-
label:
|
|
1711
|
+
label: msg.paginationNext,
|
|
1522
1712
|
size: "sm",
|
|
1523
1713
|
variant: "outlined",
|
|
1524
1714
|
isDisabled: page >= pages,
|
|
1525
1715
|
onPress: () => onPageChange?.(page + 1)
|
|
1526
1716
|
}
|
|
1527
1717
|
),
|
|
1528
|
-
onPageSizeChange ? /* @__PURE__ */
|
|
1718
|
+
onPageSizeChange ? /* @__PURE__ */ jsx34(
|
|
1529
1719
|
Select,
|
|
1530
1720
|
{
|
|
1531
|
-
"aria-label":
|
|
1721
|
+
"aria-label": msg.paginationRowsPerPage,
|
|
1532
1722
|
size: "sm",
|
|
1533
1723
|
fullWidth: false,
|
|
1534
1724
|
value: String(pageSize),
|
|
@@ -1540,8 +1730,65 @@ function Pagination({
|
|
|
1540
1730
|
] });
|
|
1541
1731
|
}
|
|
1542
1732
|
|
|
1733
|
+
// src/components/navigation/Menu.tsx
|
|
1734
|
+
import {
|
|
1735
|
+
Menu as AriaMenu,
|
|
1736
|
+
MenuItem as AriaMenuItem,
|
|
1737
|
+
MenuSection as AriaMenuSection,
|
|
1738
|
+
Separator as AriaSeparator2,
|
|
1739
|
+
Header
|
|
1740
|
+
} from "react-aria-components";
|
|
1741
|
+
import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1742
|
+
function Menu({ minWidth, className, style, ...rest }) {
|
|
1743
|
+
const width = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
|
|
1744
|
+
const menuStyle = width == null ? style : { ["--pire-menu-min-w"]: width, ...style };
|
|
1745
|
+
return /* @__PURE__ */ jsx35(
|
|
1746
|
+
AriaMenu,
|
|
1747
|
+
{
|
|
1748
|
+
className: cx("pire-menu", className),
|
|
1749
|
+
style: menuStyle,
|
|
1750
|
+
...rest
|
|
1751
|
+
}
|
|
1752
|
+
);
|
|
1753
|
+
}
|
|
1754
|
+
function MenuItem({
|
|
1755
|
+
children,
|
|
1756
|
+
icon,
|
|
1757
|
+
description,
|
|
1758
|
+
shortcut,
|
|
1759
|
+
tone = "default",
|
|
1760
|
+
className,
|
|
1761
|
+
...rest
|
|
1762
|
+
}) {
|
|
1763
|
+
return /* @__PURE__ */ jsxs28(
|
|
1764
|
+
AriaMenuItem,
|
|
1765
|
+
{
|
|
1766
|
+
className: cx("pire-menu-item", className),
|
|
1767
|
+
"data-tone": tone === "danger" ? "danger" : void 0,
|
|
1768
|
+
...rest,
|
|
1769
|
+
children: [
|
|
1770
|
+
icon ? /* @__PURE__ */ jsx35(Icon, { name: icon, size: 16, className: "pire-menu-item-icon" }) : null,
|
|
1771
|
+
/* @__PURE__ */ jsxs28("span", { className: "pire-menu-item-body", children: [
|
|
1772
|
+
/* @__PURE__ */ jsx35("span", { className: "pire-menu-item-label", children }),
|
|
1773
|
+
description ? /* @__PURE__ */ jsx35("span", { className: "pire-menu-item-desc", children: description }) : null
|
|
1774
|
+
] }),
|
|
1775
|
+
shortcut ? /* @__PURE__ */ jsx35("kbd", { className: "pire-menu-item-shortcut", children: shortcut }) : null
|
|
1776
|
+
]
|
|
1777
|
+
}
|
|
1778
|
+
);
|
|
1779
|
+
}
|
|
1780
|
+
function MenuSection({ title, children, className, ...rest }) {
|
|
1781
|
+
return /* @__PURE__ */ jsxs28(AriaMenuSection, { className: cx("pire-menu-section", className), ...rest, children: [
|
|
1782
|
+
title ? /* @__PURE__ */ jsx35(Header, { className: "pire-menu-section-title", children: title }) : null,
|
|
1783
|
+
children
|
|
1784
|
+
] });
|
|
1785
|
+
}
|
|
1786
|
+
function MenuSeparator({ className }) {
|
|
1787
|
+
return /* @__PURE__ */ jsx35(AriaSeparator2, { className: cx("pire-menu-separator", className) });
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1543
1790
|
// src/components/feedback/InlineMessage.tsx
|
|
1544
|
-
import { jsx as
|
|
1791
|
+
import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
1545
1792
|
var KIND_ICON = {
|
|
1546
1793
|
info: "info",
|
|
1547
1794
|
success: "check-circle-2",
|
|
@@ -1549,8 +1796,9 @@ var KIND_ICON = {
|
|
|
1549
1796
|
error: "alert-octagon"
|
|
1550
1797
|
};
|
|
1551
1798
|
function InlineMessage({ kind = "info", title, action, onClose, children, className, ...rest }) {
|
|
1799
|
+
const msg = usePireMessages();
|
|
1552
1800
|
const assertive = kind === "error" || kind === "warning";
|
|
1553
|
-
return /* @__PURE__ */
|
|
1801
|
+
return /* @__PURE__ */ jsxs29(
|
|
1554
1802
|
"div",
|
|
1555
1803
|
{
|
|
1556
1804
|
className: cx("pire-msg", className),
|
|
@@ -1559,13 +1807,13 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
|
|
|
1559
1807
|
"aria-live": assertive ? "assertive" : "polite",
|
|
1560
1808
|
...rest,
|
|
1561
1809
|
children: [
|
|
1562
|
-
/* @__PURE__ */
|
|
1563
|
-
/* @__PURE__ */
|
|
1564
|
-
title ? /* @__PURE__ */
|
|
1565
|
-
children ? /* @__PURE__ */
|
|
1810
|
+
/* @__PURE__ */ jsx36(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
|
|
1811
|
+
/* @__PURE__ */ jsxs29("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
|
|
1812
|
+
title ? /* @__PURE__ */ jsx36("span", { className: "pire-msg-title", children: title }) : null,
|
|
1813
|
+
children ? /* @__PURE__ */ jsx36("span", { className: "pire-msg-body", children }) : null,
|
|
1566
1814
|
action
|
|
1567
1815
|
] }),
|
|
1568
|
-
onClose ? /* @__PURE__ */
|
|
1816
|
+
onClose ? /* @__PURE__ */ jsx36(IconButton, { icon: "x", label: msg.inlineMessageDismiss, size: "sm", onPress: onClose }) : null
|
|
1569
1817
|
]
|
|
1570
1818
|
}
|
|
1571
1819
|
);
|
|
@@ -1573,7 +1821,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
|
|
|
1573
1821
|
|
|
1574
1822
|
// src/components/feedback/ProgressBar.tsx
|
|
1575
1823
|
import { ProgressBar as AriaProgressBar, Label as Label9 } from "react-aria-components";
|
|
1576
|
-
import { Fragment as Fragment2, jsx as
|
|
1824
|
+
import { Fragment as Fragment2, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
1577
1825
|
function ProgressBar({
|
|
1578
1826
|
value = 0,
|
|
1579
1827
|
minValue = 0,
|
|
@@ -1586,7 +1834,7 @@ function ProgressBar({
|
|
|
1586
1834
|
className,
|
|
1587
1835
|
style
|
|
1588
1836
|
}) {
|
|
1589
|
-
return /* @__PURE__ */
|
|
1837
|
+
return /* @__PURE__ */ jsx37(
|
|
1590
1838
|
AriaProgressBar,
|
|
1591
1839
|
{
|
|
1592
1840
|
className: cx("pire-progress", className),
|
|
@@ -1597,20 +1845,20 @@ function ProgressBar({
|
|
|
1597
1845
|
maxValue,
|
|
1598
1846
|
isIndeterminate,
|
|
1599
1847
|
style,
|
|
1600
|
-
children: ({ percentage, valueText }) => /* @__PURE__ */
|
|
1601
|
-
label || showValue ? /* @__PURE__ */
|
|
1602
|
-
label ? /* @__PURE__ */
|
|
1603
|
-
showValue && !isIndeterminate ? /* @__PURE__ */
|
|
1848
|
+
children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs30(Fragment2, { children: [
|
|
1849
|
+
label || showValue ? /* @__PURE__ */ jsxs30("div", { className: "pire-progress-head", children: [
|
|
1850
|
+
label ? /* @__PURE__ */ jsx37(Label9, { children: label }) : /* @__PURE__ */ jsx37("span", {}),
|
|
1851
|
+
showValue && !isIndeterminate ? /* @__PURE__ */ jsx37("span", { className: "pire-numeric", children: valueText }) : null
|
|
1604
1852
|
] }) : null,
|
|
1605
|
-
/* @__PURE__ */
|
|
1853
|
+
/* @__PURE__ */ jsx37("div", { className: "pire-progress-track", children: /* @__PURE__ */ jsx37("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
|
|
1606
1854
|
] })
|
|
1607
1855
|
}
|
|
1608
1856
|
);
|
|
1609
1857
|
}
|
|
1610
1858
|
|
|
1611
1859
|
// src/components/feedback/Toast.tsx
|
|
1612
|
-
import * as
|
|
1613
|
-
import { jsx as
|
|
1860
|
+
import * as React11 from "react";
|
|
1861
|
+
import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
1614
1862
|
var KIND_ICON2 = {
|
|
1615
1863
|
info: "info",
|
|
1616
1864
|
success: "check-circle-2",
|
|
@@ -1618,7 +1866,8 @@ var KIND_ICON2 = {
|
|
|
1618
1866
|
error: "alert-octagon"
|
|
1619
1867
|
};
|
|
1620
1868
|
function Toast({ kind = "success", onClose, position = "bottom-center", children, className, ...rest }) {
|
|
1621
|
-
|
|
1869
|
+
const msg = usePireMessages();
|
|
1870
|
+
return /* @__PURE__ */ jsxs31(
|
|
1622
1871
|
"div",
|
|
1623
1872
|
{
|
|
1624
1873
|
className: cx("pire-toast", className),
|
|
@@ -1627,40 +1876,41 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
|
|
|
1627
1876
|
"aria-live": kind === "error" ? "assertive" : "polite",
|
|
1628
1877
|
...rest,
|
|
1629
1878
|
children: [
|
|
1630
|
-
/* @__PURE__ */
|
|
1631
|
-
/* @__PURE__ */
|
|
1632
|
-
onClose ? /* @__PURE__ */
|
|
1879
|
+
/* @__PURE__ */ jsx38(Icon, { name: KIND_ICON2[kind], size: 16 }),
|
|
1880
|
+
/* @__PURE__ */ jsx38("span", { style: { flex: 1 }, children }),
|
|
1881
|
+
onClose ? /* @__PURE__ */ jsx38(IconButton, { icon: "x", label: msg.toastDismiss, size: "sm", variant: "inverse", onPress: onClose }) : null
|
|
1633
1882
|
]
|
|
1634
1883
|
}
|
|
1635
1884
|
);
|
|
1636
1885
|
}
|
|
1637
|
-
var ToastContext =
|
|
1886
|
+
var ToastContext = React11.createContext(null);
|
|
1638
1887
|
function ToastProvider({ children, timeout = 6e3 }) {
|
|
1639
|
-
const
|
|
1640
|
-
const
|
|
1641
|
-
const
|
|
1888
|
+
const msg = usePireMessages();
|
|
1889
|
+
const [toasts, setToasts] = React11.useState([]);
|
|
1890
|
+
const close = React11.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
|
|
1891
|
+
const add = React11.useCallback((toast) => {
|
|
1642
1892
|
const id = Math.random().toString(36).slice(2);
|
|
1643
1893
|
setToasts((t) => [...t, { ...toast, id }]);
|
|
1644
1894
|
const ms = toast.timeout ?? timeout;
|
|
1645
1895
|
if (ms > 0) setTimeout(() => close(id), ms);
|
|
1646
1896
|
return id;
|
|
1647
1897
|
}, [close, timeout]);
|
|
1648
|
-
const value =
|
|
1649
|
-
return /* @__PURE__ */
|
|
1898
|
+
const value = React11.useMemo(() => ({ add, close }), [add, close]);
|
|
1899
|
+
return /* @__PURE__ */ jsxs31(ToastContext.Provider, { value, children: [
|
|
1650
1900
|
children,
|
|
1651
|
-
/* @__PURE__ */
|
|
1901
|
+
/* @__PURE__ */ jsx38("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ jsx38(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
|
|
1652
1902
|
] });
|
|
1653
1903
|
}
|
|
1654
1904
|
function useToast() {
|
|
1655
|
-
const ctx =
|
|
1905
|
+
const ctx = React11.useContext(ToastContext);
|
|
1656
1906
|
if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
|
|
1657
1907
|
return ctx;
|
|
1658
1908
|
}
|
|
1659
1909
|
|
|
1660
1910
|
// src/components/feedback/Skeleton.tsx
|
|
1661
|
-
import { jsx as
|
|
1911
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
1662
1912
|
function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
|
|
1663
|
-
return /* @__PURE__ */
|
|
1913
|
+
return /* @__PURE__ */ jsx39(
|
|
1664
1914
|
"div",
|
|
1665
1915
|
{
|
|
1666
1916
|
className: cx("pire-skeleton", className),
|
|
@@ -1674,7 +1924,7 @@ function Skeleton({ shape = "text", width, height, className, style, ...rest })
|
|
|
1674
1924
|
var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
|
|
1675
1925
|
function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
|
|
1676
1926
|
const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
|
|
1677
|
-
return /* @__PURE__ */
|
|
1927
|
+
return /* @__PURE__ */ jsx39(
|
|
1678
1928
|
"div",
|
|
1679
1929
|
{
|
|
1680
1930
|
className: cx("pire-skeleton-row", className),
|
|
@@ -1686,13 +1936,13 @@ function SkeletonTableRow({ columns, density = "regular", className, style, ...r
|
|
|
1686
1936
|
const align = c.numeric ? "right" : c.align ?? "left";
|
|
1687
1937
|
return (
|
|
1688
1938
|
// biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
|
|
1689
|
-
/* @__PURE__ */
|
|
1939
|
+
/* @__PURE__ */ jsx39(
|
|
1690
1940
|
"div",
|
|
1691
1941
|
{
|
|
1692
1942
|
className: "pire-skeleton-cell",
|
|
1693
1943
|
"data-align": align,
|
|
1694
1944
|
style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
|
|
1695
|
-
children: /* @__PURE__ */
|
|
1945
|
+
children: /* @__PURE__ */ jsx39(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
|
|
1696
1946
|
},
|
|
1697
1947
|
i
|
|
1698
1948
|
)
|
|
@@ -1704,7 +1954,7 @@ function SkeletonTableRow({ columns, density = "regular", className, style, ...r
|
|
|
1704
1954
|
|
|
1705
1955
|
// src/components/data/KpiTile.tsx
|
|
1706
1956
|
import { Button as AriaButton10 } from "react-aria-components";
|
|
1707
|
-
import { Fragment as Fragment3, jsx as
|
|
1957
|
+
import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
1708
1958
|
function KpiTile({
|
|
1709
1959
|
label,
|
|
1710
1960
|
value,
|
|
@@ -1720,50 +1970,50 @@ function KpiTile({
|
|
|
1720
1970
|
style
|
|
1721
1971
|
}) {
|
|
1722
1972
|
const tone = deltaTone ?? (deltaDirection === "down" ? "negative" : "positive");
|
|
1723
|
-
const body = /* @__PURE__ */
|
|
1724
|
-
/* @__PURE__ */
|
|
1725
|
-
icon ? /* @__PURE__ */
|
|
1973
|
+
const body = /* @__PURE__ */ jsxs32(Fragment3, { children: [
|
|
1974
|
+
/* @__PURE__ */ jsxs32("span", { className: "pire-kpi-label", children: [
|
|
1975
|
+
icon ? /* @__PURE__ */ jsx40(Icon, { name: icon, size: 16 }) : null,
|
|
1726
1976
|
label
|
|
1727
1977
|
] }),
|
|
1728
|
-
/* @__PURE__ */
|
|
1978
|
+
/* @__PURE__ */ jsxs32("span", { className: "pire-kpi-value", children: [
|
|
1729
1979
|
value,
|
|
1730
|
-
unit ? /* @__PURE__ */
|
|
1980
|
+
unit ? /* @__PURE__ */ jsx40("span", { className: "pire-kpi-unit", children: unit }) : null
|
|
1731
1981
|
] }),
|
|
1732
|
-
delta ? /* @__PURE__ */
|
|
1733
|
-
deltaDirection ? /* @__PURE__ */
|
|
1982
|
+
delta ? /* @__PURE__ */ jsxs32("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
|
|
1983
|
+
deltaDirection ? /* @__PURE__ */ jsx40(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
|
|
1734
1984
|
delta
|
|
1735
1985
|
] }) : null,
|
|
1736
|
-
footnote ? /* @__PURE__ */
|
|
1986
|
+
footnote ? /* @__PURE__ */ jsx40("span", { className: "pire-kpi-foot", children: footnote }) : null
|
|
1737
1987
|
] });
|
|
1738
1988
|
const props = { className: cx("pire-kpi", className), "data-status": status, style };
|
|
1739
|
-
return onPress ? /* @__PURE__ */
|
|
1989
|
+
return onPress ? /* @__PURE__ */ jsx40(AriaButton10, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ jsx40("div", { ...props, children: body });
|
|
1740
1990
|
}
|
|
1741
1991
|
|
|
1742
1992
|
// src/components/data/ObjectHeader.tsx
|
|
1743
|
-
import { jsx as
|
|
1993
|
+
import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
1744
1994
|
function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions, className, ...rest }) {
|
|
1745
|
-
return /* @__PURE__ */
|
|
1995
|
+
return /* @__PURE__ */ jsxs33("header", { className: cx("pire-objheader", className), ...rest, children: [
|
|
1746
1996
|
breadcrumb,
|
|
1747
|
-
/* @__PURE__ */
|
|
1748
|
-
/* @__PURE__ */
|
|
1749
|
-
/* @__PURE__ */
|
|
1750
|
-
subtitle || id ? /* @__PURE__ */
|
|
1997
|
+
/* @__PURE__ */ jsxs33("div", { className: "pire-objheader-row", children: [
|
|
1998
|
+
/* @__PURE__ */ jsxs33("div", { style: { minWidth: 0 }, children: [
|
|
1999
|
+
/* @__PURE__ */ jsx41("h1", { className: "pire-objheader-title", children: title }),
|
|
2000
|
+
subtitle || id ? /* @__PURE__ */ jsxs33("div", { className: "pire-objheader-sub", children: [
|
|
1751
2001
|
subtitle,
|
|
1752
|
-
id ? /* @__PURE__ */
|
|
2002
|
+
id ? /* @__PURE__ */ jsx41("span", { className: "pire-objheader-id", children: id }) : null
|
|
1753
2003
|
] }) : null
|
|
1754
2004
|
] }),
|
|
1755
2005
|
badge,
|
|
1756
|
-
actions ? /* @__PURE__ */
|
|
2006
|
+
actions ? /* @__PURE__ */ jsx41("div", { className: "pire-objheader-actions", children: actions }) : null
|
|
1757
2007
|
] }),
|
|
1758
|
-
facts?.length ? /* @__PURE__ */
|
|
1759
|
-
/* @__PURE__ */
|
|
1760
|
-
/* @__PURE__ */
|
|
2008
|
+
facts?.length ? /* @__PURE__ */ jsx41("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ jsxs33("div", { children: [
|
|
2009
|
+
/* @__PURE__ */ jsx41("dt", { className: "pire-fact-label", children: fact.label }),
|
|
2010
|
+
/* @__PURE__ */ jsx41("dd", { className: "pire-fact-value", "data-numeric": fact.numeric ? "true" : void 0, style: { margin: 0 }, children: fact.value })
|
|
1761
2011
|
] }, fact.label)) }) : null
|
|
1762
2012
|
] });
|
|
1763
2013
|
}
|
|
1764
2014
|
|
|
1765
2015
|
// src/components/data/FilterBar.tsx
|
|
1766
|
-
import { jsx as
|
|
2016
|
+
import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
1767
2017
|
function FilterBar({
|
|
1768
2018
|
children,
|
|
1769
2019
|
activeFilters = [],
|
|
@@ -1772,118 +2022,123 @@ function FilterBar({
|
|
|
1772
2022
|
onGo,
|
|
1773
2023
|
resultLabel,
|
|
1774
2024
|
actions,
|
|
2025
|
+
goLabel,
|
|
2026
|
+
clearAllLabel,
|
|
1775
2027
|
className,
|
|
1776
2028
|
...rest
|
|
1777
2029
|
}) {
|
|
1778
|
-
|
|
1779
|
-
|
|
2030
|
+
const label = useMessage("filterBarLabel", rest["aria-label"]);
|
|
2031
|
+
const go = useMessage("filterBarGo", goLabel);
|
|
2032
|
+
const clearAll = useMessage("filterBarClearAll", clearAllLabel);
|
|
2033
|
+
return /* @__PURE__ */ jsxs34("section", { className: cx("pire-filterbar", className), ...rest, "aria-label": label, children: [
|
|
2034
|
+
/* @__PURE__ */ jsxs34("div", { className: "pire-filterbar-controls", children: [
|
|
1780
2035
|
children,
|
|
1781
|
-
onGo ? /* @__PURE__ */
|
|
2036
|
+
onGo ? /* @__PURE__ */ jsx42(Button, { variant: "primary", onPress: onGo, children: go }) : null
|
|
1782
2037
|
] }),
|
|
1783
|
-
activeFilters.length || resultLabel || actions ? /* @__PURE__ */
|
|
1784
|
-
activeFilters.map((filter) => /* @__PURE__ */
|
|
1785
|
-
activeFilters.length && onClear ? /* @__PURE__ */
|
|
1786
|
-
resultLabel ? /* @__PURE__ */
|
|
1787
|
-
actions ? /* @__PURE__ */
|
|
2038
|
+
activeFilters.length || resultLabel || actions ? /* @__PURE__ */ jsxs34("div", { className: "pire-filterbar-foot", children: [
|
|
2039
|
+
activeFilters.map((filter) => /* @__PURE__ */ jsx42(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
|
|
2040
|
+
activeFilters.length && onClear ? /* @__PURE__ */ jsx42(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: clearAll }) : null,
|
|
2041
|
+
resultLabel ? /* @__PURE__ */ jsx42("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
|
|
2042
|
+
actions ? /* @__PURE__ */ jsx42("div", { className: "pire-filterbar-actions", children: actions }) : null
|
|
1788
2043
|
] }) : null
|
|
1789
2044
|
] });
|
|
1790
2045
|
}
|
|
1791
2046
|
|
|
1792
2047
|
// src/components/data/DescriptionList.tsx
|
|
1793
|
-
import { jsx as
|
|
2048
|
+
import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
1794
2049
|
function DescriptionList({ items, layout = "rows", columns = 3, className, style, ...rest }) {
|
|
1795
|
-
return /* @__PURE__ */
|
|
2050
|
+
return /* @__PURE__ */ jsx43(
|
|
1796
2051
|
"dl",
|
|
1797
2052
|
{
|
|
1798
2053
|
className: cx("pire-dl", className),
|
|
1799
2054
|
"data-layout": layout,
|
|
1800
2055
|
style: { ...layout === "grid" ? { "--pire-dl-cols": columns } : null, ...style },
|
|
1801
2056
|
...rest,
|
|
1802
|
-
children: items.map((item, i) => /* @__PURE__ */
|
|
1803
|
-
/* @__PURE__ */
|
|
2057
|
+
children: items.map((item, i) => /* @__PURE__ */ jsxs35("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
|
|
2058
|
+
/* @__PURE__ */ jsxs35("dt", { className: "pire-dl-term", children: [
|
|
1804
2059
|
item.label,
|
|
1805
2060
|
item.hint
|
|
1806
2061
|
] }),
|
|
1807
|
-
/* @__PURE__ */
|
|
2062
|
+
/* @__PURE__ */ jsx43("dd", { className: "pire-dl-value", "data-numeric": item.numeric ? "true" : void 0, children: item.value })
|
|
1808
2063
|
] }, i))
|
|
1809
2064
|
}
|
|
1810
2065
|
);
|
|
1811
2066
|
}
|
|
1812
2067
|
|
|
1813
2068
|
// src/components/data/Timeline.tsx
|
|
1814
|
-
import { jsx as
|
|
2069
|
+
import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
1815
2070
|
function Timeline({ entries, reverse = false, className, ...rest }) {
|
|
1816
2071
|
const list = reverse ? [...entries].reverse() : entries;
|
|
1817
|
-
return /* @__PURE__ */
|
|
1818
|
-
/* @__PURE__ */
|
|
1819
|
-
/* @__PURE__ */
|
|
1820
|
-
entry.actor ? /* @__PURE__ */
|
|
2072
|
+
return /* @__PURE__ */ jsx44("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ jsxs36("li", { className: "pire-timeline-item", children: [
|
|
2073
|
+
/* @__PURE__ */ jsx44("span", { className: "pire-timeline-time", children: entry.time }),
|
|
2074
|
+
/* @__PURE__ */ jsx44("span", { className: "pire-timeline-text", children: entry.event }),
|
|
2075
|
+
entry.actor ? /* @__PURE__ */ jsx44("span", { className: "pire-timeline-actor", children: entry.actor }) : null
|
|
1821
2076
|
] }, entry.id ?? i)) });
|
|
1822
2077
|
}
|
|
1823
2078
|
|
|
1824
2079
|
// src/components/data/LinkList.tsx
|
|
1825
2080
|
import { Button as AriaButton11 } from "react-aria-components";
|
|
1826
|
-
import { jsx as
|
|
2081
|
+
import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
1827
2082
|
function LinkList({ items, onSelect, className, ...rest }) {
|
|
1828
|
-
return /* @__PURE__ */
|
|
1829
|
-
item.icon ? /* @__PURE__ */
|
|
1830
|
-
item.key ? /* @__PURE__ */
|
|
1831
|
-
item.text ? /* @__PURE__ */
|
|
2083
|
+
return /* @__PURE__ */ jsx45("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ jsxs37(AriaButton11, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
|
|
2084
|
+
item.icon ? /* @__PURE__ */ jsx45(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
|
|
2085
|
+
item.key ? /* @__PURE__ */ jsx45("span", { className: "pire-linklist-key", children: item.key }) : null,
|
|
2086
|
+
item.text ? /* @__PURE__ */ jsx45("span", { className: "pire-linklist-text", children: item.text }) : null,
|
|
1832
2087
|
item.trailing
|
|
1833
2088
|
] }, item.id)) });
|
|
1834
2089
|
}
|
|
1835
2090
|
|
|
1836
2091
|
// src/components/layout/PageHeader.tsx
|
|
1837
|
-
import { jsx as
|
|
2092
|
+
import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
1838
2093
|
function PageHeader({ title, subtitle, actions, className, ...rest }) {
|
|
1839
|
-
return /* @__PURE__ */
|
|
1840
|
-
/* @__PURE__ */
|
|
1841
|
-
/* @__PURE__ */
|
|
1842
|
-
subtitle ? /* @__PURE__ */
|
|
2094
|
+
return /* @__PURE__ */ jsxs38("header", { className: cx("pire-pageheader", className), ...rest, children: [
|
|
2095
|
+
/* @__PURE__ */ jsxs38("div", { style: { minWidth: 0 }, children: [
|
|
2096
|
+
/* @__PURE__ */ jsx46("h1", { className: "pire-pageheader-title", children: title }),
|
|
2097
|
+
subtitle ? /* @__PURE__ */ jsx46("p", { className: "pire-pageheader-sub", children: subtitle }) : null
|
|
1843
2098
|
] }),
|
|
1844
|
-
actions ? /* @__PURE__ */
|
|
2099
|
+
actions ? /* @__PURE__ */ jsx46("div", { className: "pire-pageheader-actions", children: actions }) : null
|
|
1845
2100
|
] });
|
|
1846
2101
|
}
|
|
1847
2102
|
|
|
1848
2103
|
// src/components/layout/SectionHeader.tsx
|
|
1849
|
-
import { jsx as
|
|
2104
|
+
import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
1850
2105
|
function SectionHeader({ title, meta, actions, className, ...rest }) {
|
|
1851
|
-
return /* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1853
|
-
meta ? /* @__PURE__ */
|
|
1854
|
-
actions ? /* @__PURE__ */
|
|
2106
|
+
return /* @__PURE__ */ jsxs39("div", { className: cx("pire-sectionhead", className), ...rest, children: [
|
|
2107
|
+
/* @__PURE__ */ jsx47("span", { className: "pire-eyebrow", children: title }),
|
|
2108
|
+
meta ? /* @__PURE__ */ jsx47("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
|
|
2109
|
+
actions ? /* @__PURE__ */ jsx47("div", { className: "pire-sectionhead-actions", children: actions }) : null
|
|
1855
2110
|
] });
|
|
1856
2111
|
}
|
|
1857
2112
|
|
|
1858
2113
|
// src/components/layout/SelectionBar.tsx
|
|
1859
|
-
import { jsx as
|
|
2114
|
+
import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
1860
2115
|
function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
|
|
1861
2116
|
if (!count) return null;
|
|
1862
|
-
return /* @__PURE__ */
|
|
1863
|
-
/* @__PURE__ */
|
|
2117
|
+
return /* @__PURE__ */ jsxs40("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
|
|
2118
|
+
/* @__PURE__ */ jsxs40("span", { className: "pire-selectionbar-count", children: [
|
|
1864
2119
|
count.toLocaleString(),
|
|
1865
2120
|
" ",
|
|
1866
2121
|
noun,
|
|
1867
2122
|
count === 1 ? "" : "s",
|
|
1868
2123
|
" selected"
|
|
1869
2124
|
] }),
|
|
1870
|
-
children ? /* @__PURE__ */
|
|
1871
|
-
actions ? /* @__PURE__ */
|
|
2125
|
+
children ? /* @__PURE__ */ jsx48("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
|
|
2126
|
+
actions ? /* @__PURE__ */ jsx48("div", { className: "pire-selectionbar-actions", children: actions }) : null
|
|
1872
2127
|
] });
|
|
1873
2128
|
}
|
|
1874
2129
|
|
|
1875
2130
|
// src/components/layout/FooterBar.tsx
|
|
1876
|
-
import { jsx as
|
|
2131
|
+
import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
1877
2132
|
function FooterBar({ note, actions, children, className, ...rest }) {
|
|
1878
|
-
return /* @__PURE__ */
|
|
1879
|
-
note ? /* @__PURE__ */
|
|
2133
|
+
return /* @__PURE__ */ jsxs41("footer", { className: cx("pire-footerbar", className), ...rest, children: [
|
|
2134
|
+
note ? /* @__PURE__ */ jsx49("span", { className: "pire-footerbar-note", children: note }) : null,
|
|
1880
2135
|
children,
|
|
1881
|
-
actions ? /* @__PURE__ */
|
|
2136
|
+
actions ? /* @__PURE__ */ jsx49("div", { className: "pire-footerbar-actions", children: actions }) : null
|
|
1882
2137
|
] });
|
|
1883
2138
|
}
|
|
1884
2139
|
|
|
1885
2140
|
// src/components/patterns/ConfirmDialog.tsx
|
|
1886
|
-
import { Fragment as Fragment4, jsx as
|
|
2141
|
+
import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
1887
2142
|
function ConfirmDialog({
|
|
1888
2143
|
isOpen,
|
|
1889
2144
|
title,
|
|
@@ -1897,7 +2152,7 @@ function ConfirmDialog({
|
|
|
1897
2152
|
onConfirm,
|
|
1898
2153
|
onCancel
|
|
1899
2154
|
}) {
|
|
1900
|
-
return /* @__PURE__ */
|
|
2155
|
+
return /* @__PURE__ */ jsxs42(
|
|
1901
2156
|
Dialog,
|
|
1902
2157
|
{
|
|
1903
2158
|
isOpen,
|
|
@@ -1907,12 +2162,12 @@ function ConfirmDialog({
|
|
|
1907
2162
|
onClose: onCancel,
|
|
1908
2163
|
isDismissable: !isBusy,
|
|
1909
2164
|
showClose: false,
|
|
1910
|
-
footer: /* @__PURE__ */
|
|
1911
|
-
/* @__PURE__ */
|
|
1912
|
-
/* @__PURE__ */
|
|
2165
|
+
footer: /* @__PURE__ */ jsxs42(Fragment4, { children: [
|
|
2166
|
+
/* @__PURE__ */ jsx50(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
|
|
2167
|
+
/* @__PURE__ */ jsx50(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
|
|
1913
2168
|
] }),
|
|
1914
2169
|
children: [
|
|
1915
|
-
consequence ? /* @__PURE__ */
|
|
2170
|
+
consequence ? /* @__PURE__ */ jsx50(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
|
|
1916
2171
|
children
|
|
1917
2172
|
]
|
|
1918
2173
|
}
|
|
@@ -1920,10 +2175,11 @@ function ConfirmDialog({
|
|
|
1920
2175
|
}
|
|
1921
2176
|
|
|
1922
2177
|
// src/components/patterns/SidePanel.tsx
|
|
1923
|
-
import { ModalOverlay as ModalOverlay2, Modal as Modal2, Dialog as AriaDialog3, Heading as
|
|
1924
|
-
import { jsx as
|
|
2178
|
+
import { ModalOverlay as ModalOverlay2, Modal as Modal2, Dialog as AriaDialog3, Heading as Heading4 } from "react-aria-components";
|
|
2179
|
+
import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
1925
2180
|
function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
|
|
1926
|
-
|
|
2181
|
+
const msg = usePireMessages();
|
|
2182
|
+
return /* @__PURE__ */ jsx51(
|
|
1927
2183
|
ModalOverlay2,
|
|
1928
2184
|
{
|
|
1929
2185
|
className: "pire-sidepanel-overlay",
|
|
@@ -1932,34 +2188,34 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
|
|
|
1932
2188
|
onOpenChange: (o) => {
|
|
1933
2189
|
if (!o) onClose?.();
|
|
1934
2190
|
},
|
|
1935
|
-
children: /* @__PURE__ */
|
|
1936
|
-
/* @__PURE__ */
|
|
1937
|
-
/* @__PURE__ */
|
|
1938
|
-
/* @__PURE__ */
|
|
1939
|
-
subtitle ? /* @__PURE__ */
|
|
2191
|
+
children: /* @__PURE__ */ jsx51(Modal2, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ jsxs43(AriaDialog3, { className: "pire-dialog", style: { height: "100%" }, children: [
|
|
2192
|
+
/* @__PURE__ */ jsxs43("header", { className: "pire-dialog-head", children: [
|
|
2193
|
+
/* @__PURE__ */ jsxs43("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
2194
|
+
/* @__PURE__ */ jsx51(Heading4, { slot: "title", className: "pire-dialog-title", children: title }),
|
|
2195
|
+
subtitle ? /* @__PURE__ */ jsx51("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
|
|
1940
2196
|
] }),
|
|
1941
|
-
/* @__PURE__ */
|
|
2197
|
+
/* @__PURE__ */ jsx51(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
|
|
1942
2198
|
] }),
|
|
1943
|
-
/* @__PURE__ */
|
|
1944
|
-
footer ? /* @__PURE__ */
|
|
2199
|
+
/* @__PURE__ */ jsx51("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
|
|
2200
|
+
footer ? /* @__PURE__ */ jsx51("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
1945
2201
|
] }) })
|
|
1946
2202
|
}
|
|
1947
2203
|
);
|
|
1948
2204
|
}
|
|
1949
2205
|
|
|
1950
2206
|
// src/components/patterns/EmptyState.tsx
|
|
1951
|
-
import { jsx as
|
|
2207
|
+
import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
1952
2208
|
function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
|
|
1953
|
-
return /* @__PURE__ */
|
|
1954
|
-
/* @__PURE__ */
|
|
1955
|
-
title ? /* @__PURE__ */
|
|
1956
|
-
children ? /* @__PURE__ */
|
|
2209
|
+
return /* @__PURE__ */ jsxs44("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
|
|
2210
|
+
/* @__PURE__ */ jsx52(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
|
|
2211
|
+
title ? /* @__PURE__ */ jsx52("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
|
|
2212
|
+
children ? /* @__PURE__ */ jsx52("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
|
|
1957
2213
|
action
|
|
1958
2214
|
] });
|
|
1959
2215
|
}
|
|
1960
2216
|
|
|
1961
2217
|
// src/index.ts
|
|
1962
|
-
import { DialogTrigger, MenuTrigger,
|
|
2218
|
+
import { DialogTrigger, MenuTrigger, SubmenuTrigger, Popover as Popover5, RouterProvider, I18nProvider } from "react-aria-components";
|
|
1963
2219
|
export {
|
|
1964
2220
|
Avatar,
|
|
1965
2221
|
Badge,
|
|
@@ -1978,25 +2234,31 @@ export {
|
|
|
1978
2234
|
FilterBar,
|
|
1979
2235
|
FooterBar,
|
|
1980
2236
|
FormField,
|
|
2237
|
+
Heading,
|
|
1981
2238
|
I18nProvider,
|
|
1982
2239
|
Icon,
|
|
1983
2240
|
IconButton,
|
|
1984
2241
|
InlineMessage,
|
|
1985
2242
|
Input,
|
|
1986
2243
|
KpiTile,
|
|
2244
|
+
Link,
|
|
1987
2245
|
LinkList,
|
|
1988
2246
|
Menu,
|
|
1989
2247
|
MenuItem,
|
|
2248
|
+
MenuSection,
|
|
2249
|
+
MenuSeparator,
|
|
1990
2250
|
MenuTrigger,
|
|
1991
2251
|
MultiComboBox,
|
|
1992
2252
|
NumberField,
|
|
1993
2253
|
ObjectHeader,
|
|
1994
2254
|
PageHeader,
|
|
1995
2255
|
Pagination,
|
|
2256
|
+
PireIntlProvider,
|
|
1996
2257
|
Popover5 as Popover,
|
|
1997
2258
|
ProgressBar,
|
|
1998
2259
|
Radio,
|
|
1999
2260
|
RadioGroup,
|
|
2261
|
+
RouterProvider,
|
|
2000
2262
|
SectionHeader,
|
|
2001
2263
|
SegmentedControl,
|
|
2002
2264
|
Select,
|
|
@@ -2007,9 +2269,12 @@ export {
|
|
|
2007
2269
|
SidePanel,
|
|
2008
2270
|
Skeleton,
|
|
2009
2271
|
SkeletonTableRow,
|
|
2272
|
+
Strong,
|
|
2273
|
+
SubmenuTrigger,
|
|
2010
2274
|
Switch,
|
|
2011
2275
|
Tabs,
|
|
2012
2276
|
Tag,
|
|
2277
|
+
Text,
|
|
2013
2278
|
TextArea,
|
|
2014
2279
|
Timeline,
|
|
2015
2280
|
Toast,
|
|
@@ -2018,6 +2283,9 @@ export {
|
|
|
2018
2283
|
ValueHelpDialog,
|
|
2019
2284
|
ValueHelpField,
|
|
2020
2285
|
configureIcons,
|
|
2286
|
+
enMessages,
|
|
2287
|
+
esMessages,
|
|
2288
|
+
usePireMessages,
|
|
2021
2289
|
useToast
|
|
2022
2290
|
};
|
|
2023
2291
|
//# sourceMappingURL=index.js.map
|