@dimaan/ui 0.0.13 → 0.0.15

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/index.cjs CHANGED
@@ -9,6 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
9
9
  var lucideReact = require('lucide-react');
10
10
  var RadixPopover = require('@radix-ui/react-popover');
11
11
  var reactDayPicker = require('react-day-picker');
12
+ var RadixDialog = require('@radix-ui/react-dialog');
12
13
  var RadixDropdown = require('@radix-ui/react-dropdown-menu');
13
14
  var reactHookForm = require('react-hook-form');
14
15
  var RadixSelect = require('@radix-ui/react-select');
@@ -36,6 +37,7 @@ function _interopNamespace(e) {
36
37
  var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
37
38
  var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
38
39
  var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
40
+ var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
39
41
  var RadixDropdown__namespace = /*#__PURE__*/_interopNamespace(RadixDropdown);
40
42
  var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
41
43
  var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
@@ -16374,86 +16376,6 @@ function readDocumentLocale() {
16374
16376
  return lang || void 0;
16375
16377
  }
16376
16378
 
16377
- // src/components/dropdown-menu/dropdownMenuVariants.ts
16378
- var dropdownMenuContentClass = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
16379
- var dropdownMenuItemBaseClass = "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
16380
- var dropdownMenuItemVariantClass = {
16381
- default: "text-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
16382
- destructive: "text-destructive data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground"
16383
- };
16384
- var dropdownMenuItemInsetClass = "ps-8";
16385
- var dropdownMenuSeparatorClass = "-mx-1 my-1 h-px bg-border";
16386
- var dropdownMenuLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground select-none";
16387
- var dropdownMenuShortcutClass = "ms-auto text-xs tracking-widest text-muted-foreground";
16388
- var DropdownMenu = RadixDropdown__namespace.Root;
16389
- var DropdownMenuTrigger = RadixDropdown__namespace.Trigger;
16390
- var DropdownMenuGroup = RadixDropdown__namespace.Group;
16391
- var DropdownMenuPortal = RadixDropdown__namespace.Portal;
16392
- var DropdownMenuContent = React10.forwardRef(function DropdownMenuContent2({ className, sideOffset = 4, ...props }, ref) {
16393
- return /* @__PURE__ */ jsxRuntime.jsx(RadixDropdown__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
16394
- RadixDropdown__namespace.Content,
16395
- {
16396
- ref,
16397
- sideOffset,
16398
- "data-slot": "dropdown-menu-content",
16399
- className: cn(dropdownMenuContentClass, className),
16400
- ...props
16401
- }
16402
- ) });
16403
- });
16404
- var DropdownMenuItem = React10.forwardRef(function DropdownMenuItem2({ className, variant = "default", inset = false, ...props }, ref) {
16405
- return /* @__PURE__ */ jsxRuntime.jsx(
16406
- RadixDropdown__namespace.Item,
16407
- {
16408
- ref,
16409
- "data-slot": "dropdown-menu-item",
16410
- "data-variant": variant,
16411
- className: cn(
16412
- dropdownMenuItemBaseClass,
16413
- dropdownMenuItemVariantClass[variant],
16414
- inset && dropdownMenuItemInsetClass,
16415
- className
16416
- ),
16417
- ...props
16418
- }
16419
- );
16420
- });
16421
- var DropdownMenuSeparator = React10.forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
16422
- return /* @__PURE__ */ jsxRuntime.jsx(
16423
- RadixDropdown__namespace.Separator,
16424
- {
16425
- ref,
16426
- "data-slot": "dropdown-menu-separator",
16427
- className: cn(dropdownMenuSeparatorClass, className),
16428
- ...props
16429
- }
16430
- );
16431
- });
16432
- var DropdownMenuLabel = React10.forwardRef(function DropdownMenuLabel2({ className, inset = false, ...props }, ref) {
16433
- return /* @__PURE__ */ jsxRuntime.jsx(
16434
- RadixDropdown__namespace.Label,
16435
- {
16436
- ref,
16437
- "data-slot": "dropdown-menu-label",
16438
- className: cn(dropdownMenuLabelClass, inset && dropdownMenuItemInsetClass, className),
16439
- ...props
16440
- }
16441
- );
16442
- });
16443
- var DropdownMenuShortcut = React10.forwardRef(
16444
- function DropdownMenuShortcut2({ className, ...props }, ref) {
16445
- return /* @__PURE__ */ jsxRuntime.jsx(
16446
- "span",
16447
- {
16448
- ref,
16449
- "data-slot": "dropdown-menu-shortcut",
16450
- className: cn(dropdownMenuShortcutClass, className),
16451
- ...props
16452
- }
16453
- );
16454
- }
16455
- );
16456
-
16457
16379
  // src/components/empty-state/emptyStateVariants.ts
16458
16380
  var emptyStateContainerSizeClass = {
16459
16381
  sm: "py-8 gap-2",
@@ -16533,6 +16455,303 @@ var EmptyState = React10.forwardRef(function EmptyState2({ icon, title, descript
16533
16455
  }
16534
16456
  );
16535
16457
  });
16458
+
16459
+ // src/components/page-header/PageHeader.tsx
16460
+ var import_react_router_dom2 = __toESM(require_dist2());
16461
+
16462
+ // src/components/page-header/pageHeaderVariants.ts
16463
+ var pageHeaderBaseClass = "flex w-full flex-col gap-3";
16464
+ var pageHeaderBorderedClass = "border-b border-border pb-4";
16465
+ var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
16466
+ var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
16467
+ var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
16468
+ var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
16469
+ var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
16470
+ var pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
16471
+ var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
16472
+ var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
16473
+ var PageHeader = React10.forwardRef(function PageHeader2({
16474
+ title,
16475
+ description,
16476
+ breadcrumbs,
16477
+ back,
16478
+ actions,
16479
+ as = "h1",
16480
+ bordered = false,
16481
+ className,
16482
+ ...props
16483
+ }, ref) {
16484
+ return /* @__PURE__ */ jsxRuntime.jsxs(
16485
+ "header",
16486
+ {
16487
+ ref,
16488
+ "data-slot": "page-header",
16489
+ className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
16490
+ ...props,
16491
+ children: [
16492
+ breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
16493
+ back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
16494
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
16495
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
16496
+ React10.createElement(
16497
+ as,
16498
+ { "data-slot": "page-header-title", className: pageHeaderTitleClass },
16499
+ title
16500
+ ),
16501
+ description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
16502
+ ] }),
16503
+ actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
16504
+ ] })
16505
+ ]
16506
+ }
16507
+ );
16508
+ });
16509
+ function PageHeaderBack({ label = "Back", to, onClick, render }) {
16510
+ const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
16511
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
16512
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
16513
+ ] });
16514
+ if (render) {
16515
+ return render({
16516
+ to,
16517
+ onClick,
16518
+ className: pageHeaderBackClass,
16519
+ children: inner
16520
+ });
16521
+ }
16522
+ if (to) {
16523
+ return /* @__PURE__ */ jsxRuntime.jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
16524
+ }
16525
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
16526
+ }
16527
+
16528
+ // src/components/detail-page/detailPageVariants.ts
16529
+ var detailPageBaseClass = "flex w-full flex-col gap-6";
16530
+ var detailPageBodyClass = "flex flex-col gap-6";
16531
+ var detailPageSkeletonRowClass = "h-5 w-full animate-pulse rounded-md bg-muted";
16532
+ var detailPageEmptyClass = "rounded-md border border-border bg-card";
16533
+ var DEFAULT_LABELS = {
16534
+ notFoundTitle: "Not found",
16535
+ notFoundDescription: "The record you\u2019re looking for does not exist or has been removed."
16536
+ };
16537
+ var DEFAULT_SKELETON_ROW_COUNT = 6;
16538
+ function DetailPage({
16539
+ title,
16540
+ description,
16541
+ back,
16542
+ actions,
16543
+ bordered = true,
16544
+ isLoading = false,
16545
+ loadingRowCount = DEFAULT_SKELETON_ROW_COUNT,
16546
+ notFound = false,
16547
+ notFoundState,
16548
+ labels: labelsProp,
16549
+ children,
16550
+ className,
16551
+ bodyClassName
16552
+ }) {
16553
+ const labels = { ...DEFAULT_LABELS, ...labelsProp };
16554
+ return /* @__PURE__ */ jsxRuntime.jsxs(
16555
+ "div",
16556
+ {
16557
+ "data-slot": "detail-page",
16558
+ "data-state": isLoading ? "loading" : notFound ? "not-found" : "ready",
16559
+ "aria-busy": isLoading || void 0,
16560
+ className: cn(detailPageBaseClass, className),
16561
+ children: [
16562
+ /* @__PURE__ */ jsxRuntime.jsx(
16563
+ PageHeader,
16564
+ {
16565
+ title,
16566
+ description,
16567
+ back,
16568
+ actions,
16569
+ bordered
16570
+ }
16571
+ ),
16572
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx(DetailPageSkeleton, { rowCount: loadingRowCount }) : notFound ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "detail-page-empty", "data-state": "not-found", className: detailPageEmptyClass, children: /* @__PURE__ */ jsxRuntime.jsx(
16573
+ EmptyState,
16574
+ {
16575
+ size: "lg",
16576
+ icon: notFoundState?.icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileQuestion, {}),
16577
+ title: notFoundState?.title ?? labels.notFoundTitle,
16578
+ description: notFoundState?.description ?? labels.notFoundDescription,
16579
+ action: notFoundState?.action ?? null
16580
+ }
16581
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "detail-page-body", className: cn(detailPageBodyClass, bodyClassName), children })
16582
+ ]
16583
+ }
16584
+ );
16585
+ }
16586
+ function DetailPageSkeleton({ rowCount }) {
16587
+ const rows = Array.from({ length: Math.max(1, rowCount) }, (_, i) => `detail-page-skeleton-${i}`);
16588
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", "aria-hidden": "true", children: rows.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
16589
+ "div",
16590
+ {
16591
+ "data-testid": "detail-page-skeleton-row",
16592
+ className: detailPageSkeletonRowClass
16593
+ },
16594
+ key
16595
+ )) });
16596
+ }
16597
+
16598
+ // src/components/dialog/dialogVariants.ts
16599
+ var dialogOverlayClass = "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
16600
+ var dialogContentClass = "fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-background p-6 text-foreground shadow-lg outline-none rtl:translate-x-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
16601
+ var dialogHeaderClass = "flex flex-col gap-1.5 text-start";
16602
+ var dialogTitleClass = "text-lg font-semibold text-foreground";
16603
+ var dialogDescriptionClass = "text-sm text-muted-foreground";
16604
+ var dialogFooterClass = "flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end";
16605
+ var dialogCloseButtonClass = "absolute end-4 top-4 inline-flex size-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none";
16606
+ var Dialog = RadixDialog__namespace.Root;
16607
+ var DialogTrigger = RadixDialog__namespace.Trigger;
16608
+ var DialogPortal = RadixDialog__namespace.Portal;
16609
+ var DialogClose = RadixDialog__namespace.Close;
16610
+ var DialogOverlay = React10.forwardRef(function DialogOverlay2({ className, ...props }, ref) {
16611
+ return /* @__PURE__ */ jsxRuntime.jsx(
16612
+ RadixDialog__namespace.Overlay,
16613
+ {
16614
+ ref,
16615
+ "data-slot": "dialog-overlay",
16616
+ className: cn(dialogOverlayClass, className),
16617
+ ...props
16618
+ }
16619
+ );
16620
+ });
16621
+ var DialogContent = React10.forwardRef(function DialogContent2({ className, children, showCloseButton = true, closeLabel = "Close", ...props }, ref) {
16622
+ return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { children: [
16623
+ /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
16624
+ /* @__PURE__ */ jsxRuntime.jsxs(
16625
+ RadixDialog__namespace.Content,
16626
+ {
16627
+ ref,
16628
+ "data-slot": "dialog-content",
16629
+ className: cn(dialogContentClass, className),
16630
+ ...props,
16631
+ children: [
16632
+ children,
16633
+ showCloseButton ? /* @__PURE__ */ jsxRuntime.jsx(
16634
+ RadixDialog__namespace.Close,
16635
+ {
16636
+ "aria-label": closeLabel,
16637
+ "data-slot": "dialog-close-button",
16638
+ className: dialogCloseButtonClass,
16639
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", "aria-hidden": "true" })
16640
+ }
16641
+ ) : null
16642
+ ]
16643
+ }
16644
+ )
16645
+ ] });
16646
+ });
16647
+ function DialogHeader({ className, ...props }) {
16648
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "dialog-header", className: cn(dialogHeaderClass, className), ...props });
16649
+ }
16650
+ function DialogFooter({ className, ...props }) {
16651
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "dialog-footer", className: cn(dialogFooterClass, className), ...props });
16652
+ }
16653
+ var DialogTitle = React10.forwardRef(function DialogTitle2({ className, ...props }, ref) {
16654
+ return /* @__PURE__ */ jsxRuntime.jsx(
16655
+ RadixDialog__namespace.Title,
16656
+ {
16657
+ ref,
16658
+ "data-slot": "dialog-title",
16659
+ className: cn(dialogTitleClass, className),
16660
+ ...props
16661
+ }
16662
+ );
16663
+ });
16664
+ var DialogDescription = React10.forwardRef(function DialogDescription2({ className, ...props }, ref) {
16665
+ return /* @__PURE__ */ jsxRuntime.jsx(
16666
+ RadixDialog__namespace.Description,
16667
+ {
16668
+ ref,
16669
+ "data-slot": "dialog-description",
16670
+ className: cn(dialogDescriptionClass, className),
16671
+ ...props
16672
+ }
16673
+ );
16674
+ });
16675
+
16676
+ // src/components/dropdown-menu/dropdownMenuVariants.ts
16677
+ var dropdownMenuContentClass = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
16678
+ var dropdownMenuItemBaseClass = "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
16679
+ var dropdownMenuItemVariantClass = {
16680
+ default: "text-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
16681
+ destructive: "text-destructive data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground"
16682
+ };
16683
+ var dropdownMenuItemInsetClass = "ps-8";
16684
+ var dropdownMenuSeparatorClass = "-mx-1 my-1 h-px bg-border";
16685
+ var dropdownMenuLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground select-none";
16686
+ var dropdownMenuShortcutClass = "ms-auto text-xs tracking-widest text-muted-foreground";
16687
+ var DropdownMenu = RadixDropdown__namespace.Root;
16688
+ var DropdownMenuTrigger = RadixDropdown__namespace.Trigger;
16689
+ var DropdownMenuGroup = RadixDropdown__namespace.Group;
16690
+ var DropdownMenuPortal = RadixDropdown__namespace.Portal;
16691
+ var DropdownMenuContent = React10.forwardRef(function DropdownMenuContent2({ className, sideOffset = 4, ...props }, ref) {
16692
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixDropdown__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
16693
+ RadixDropdown__namespace.Content,
16694
+ {
16695
+ ref,
16696
+ sideOffset,
16697
+ "data-slot": "dropdown-menu-content",
16698
+ className: cn(dropdownMenuContentClass, className),
16699
+ ...props
16700
+ }
16701
+ ) });
16702
+ });
16703
+ var DropdownMenuItem = React10.forwardRef(function DropdownMenuItem2({ className, variant = "default", inset = false, ...props }, ref) {
16704
+ return /* @__PURE__ */ jsxRuntime.jsx(
16705
+ RadixDropdown__namespace.Item,
16706
+ {
16707
+ ref,
16708
+ "data-slot": "dropdown-menu-item",
16709
+ "data-variant": variant,
16710
+ className: cn(
16711
+ dropdownMenuItemBaseClass,
16712
+ dropdownMenuItemVariantClass[variant],
16713
+ inset && dropdownMenuItemInsetClass,
16714
+ className
16715
+ ),
16716
+ ...props
16717
+ }
16718
+ );
16719
+ });
16720
+ var DropdownMenuSeparator = React10.forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
16721
+ return /* @__PURE__ */ jsxRuntime.jsx(
16722
+ RadixDropdown__namespace.Separator,
16723
+ {
16724
+ ref,
16725
+ "data-slot": "dropdown-menu-separator",
16726
+ className: cn(dropdownMenuSeparatorClass, className),
16727
+ ...props
16728
+ }
16729
+ );
16730
+ });
16731
+ var DropdownMenuLabel = React10.forwardRef(function DropdownMenuLabel2({ className, inset = false, ...props }, ref) {
16732
+ return /* @__PURE__ */ jsxRuntime.jsx(
16733
+ RadixDropdown__namespace.Label,
16734
+ {
16735
+ ref,
16736
+ "data-slot": "dropdown-menu-label",
16737
+ className: cn(dropdownMenuLabelClass, inset && dropdownMenuItemInsetClass, className),
16738
+ ...props
16739
+ }
16740
+ );
16741
+ });
16742
+ var DropdownMenuShortcut = React10.forwardRef(
16743
+ function DropdownMenuShortcut2({ className, ...props }, ref) {
16744
+ return /* @__PURE__ */ jsxRuntime.jsx(
16745
+ "span",
16746
+ {
16747
+ ref,
16748
+ "data-slot": "dropdown-menu-shortcut",
16749
+ className: cn(dropdownMenuShortcutClass, className),
16750
+ ...props
16751
+ }
16752
+ );
16753
+ }
16754
+ );
16536
16755
  function Field(props) {
16537
16756
  const formContext = reactHookForm.useFormContext();
16538
16757
  if (props.name !== void 0) {
@@ -16662,6 +16881,57 @@ function mergeRefs2(...refs) {
16662
16881
  };
16663
16882
  }
16664
16883
 
16884
+ // src/components/form-page/formPageVariants.ts
16885
+ var formPageBaseClass = "flex w-full flex-col gap-6";
16886
+ var formPageBodyClass = "flex-1";
16887
+ var formPageActionsBarClass = "sticky bottom-0 -mx-6 -mb-6 mt-6 flex items-center justify-end gap-2 border-t border-border bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80";
16888
+ var formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
16889
+ var DEFAULT_SKELETON_ROW_COUNT2 = 6;
16890
+ function FormPage({
16891
+ title,
16892
+ description,
16893
+ back,
16894
+ bordered = true,
16895
+ onSubmit,
16896
+ isLoading = false,
16897
+ loadingRowCount = DEFAULT_SKELETON_ROW_COUNT2,
16898
+ actions,
16899
+ children,
16900
+ className,
16901
+ formClassName,
16902
+ bodyClassName,
16903
+ actionsClassName
16904
+ }) {
16905
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
16906
+ /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, back, bordered }),
16907
+ /* @__PURE__ */ jsxRuntime.jsxs(
16908
+ "form",
16909
+ {
16910
+ onSubmit,
16911
+ "aria-busy": isLoading || void 0,
16912
+ noValidate: true,
16913
+ "data-slot": "form-page-form",
16914
+ className: cn("flex flex-1 flex-col gap-6", formClassName),
16915
+ children: [
16916
+ /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-page-body", className: cn(formPageBodyClass, bodyClassName), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(FormPageSkeleton, { rowCount: loadingRowCount }) : children }),
16917
+ actions !== null && actions !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
16918
+ "div",
16919
+ {
16920
+ "data-slot": "form-page-actions",
16921
+ className: cn(formPageActionsBarClass, actionsClassName),
16922
+ children: actions
16923
+ }
16924
+ ) : null
16925
+ ]
16926
+ }
16927
+ )
16928
+ ] });
16929
+ }
16930
+ function FormPageSkeleton({ rowCount }) {
16931
+ const rows = Array.from({ length: Math.max(1, rowCount) }, (_, i) => `form-page-skeleton-${i}`);
16932
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", "aria-hidden": "true", children: rows.map((key) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "form-page-skeleton-row", className: formPageSkeletonRowClass }, key)) });
16933
+ }
16934
+
16665
16935
  // src/components/input/inputVariants.ts
16666
16936
  var inputVariantClass = {
16667
16937
  default: "border border-input bg-background hover:border-ring",
@@ -16777,75 +17047,6 @@ function LanguageSwitcher({
16777
17047
  );
16778
17048
  }
16779
17049
 
16780
- // src/components/page-header/PageHeader.tsx
16781
- var import_react_router_dom2 = __toESM(require_dist2());
16782
-
16783
- // src/components/page-header/pageHeaderVariants.ts
16784
- var pageHeaderBaseClass = "flex w-full flex-col gap-3";
16785
- var pageHeaderBorderedClass = "border-b border-border pb-4";
16786
- var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
16787
- var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
16788
- var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
16789
- var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
16790
- var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
16791
- var pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
16792
- var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
16793
- var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
16794
- var PageHeader = React10.forwardRef(function PageHeader2({
16795
- title,
16796
- description,
16797
- breadcrumbs,
16798
- back,
16799
- actions,
16800
- as = "h1",
16801
- bordered = false,
16802
- className,
16803
- ...props
16804
- }, ref) {
16805
- return /* @__PURE__ */ jsxRuntime.jsxs(
16806
- "header",
16807
- {
16808
- ref,
16809
- "data-slot": "page-header",
16810
- className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
16811
- ...props,
16812
- children: [
16813
- breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
16814
- back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
16815
- /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
16816
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
16817
- React10.createElement(
16818
- as,
16819
- { "data-slot": "page-header-title", className: pageHeaderTitleClass },
16820
- title
16821
- ),
16822
- description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
16823
- ] }),
16824
- actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
16825
- ] })
16826
- ]
16827
- }
16828
- );
16829
- });
16830
- function PageHeaderBack({ label = "Back", to, onClick, render }) {
16831
- const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
16832
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
16833
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
16834
- ] });
16835
- if (render) {
16836
- return render({
16837
- to,
16838
- onClick,
16839
- className: pageHeaderBackClass,
16840
- children: inner
16841
- });
16842
- }
16843
- if (to) {
16844
- return /* @__PURE__ */ jsxRuntime.jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
16845
- }
16846
- return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
16847
- }
16848
-
16849
17050
  // src/components/select/selectVariants.ts
16850
17051
  var selectVariantClass = {
16851
17052
  default: "border border-input bg-background hover:border-ring",
@@ -17458,7 +17659,7 @@ function SortIndicator({ active, direction }) {
17458
17659
  if (!active) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className });
17459
17660
  return direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className });
17460
17661
  }
17461
- var DEFAULT_LABELS = {
17662
+ var DEFAULT_LABELS2 = {
17462
17663
  searchPlaceholder: "Search\u2026",
17463
17664
  searchAriaLabel: "Search",
17464
17665
  reset: "Reset filters",
@@ -17491,7 +17692,7 @@ function ListPage({
17491
17692
  labels: labelsProp,
17492
17693
  className
17493
17694
  }) {
17494
- const labels = { ...DEFAULT_LABELS, ...labelsProp };
17695
+ const labels = { ...DEFAULT_LABELS2, ...labelsProp };
17495
17696
  const initialFilterValues = React10.useMemo(() => {
17496
17697
  const init = {};
17497
17698
  for (const f of filters ?? []) {
@@ -17930,6 +18131,17 @@ exports.DashboardHeader = DashboardHeader;
17930
18131
  exports.DashboardLayout = DashboardLayout;
17931
18132
  exports.DashboardMain = DashboardMain;
17932
18133
  exports.DatePicker = DatePicker;
18134
+ exports.DetailPage = DetailPage;
18135
+ exports.Dialog = Dialog;
18136
+ exports.DialogClose = DialogClose;
18137
+ exports.DialogContent = DialogContent;
18138
+ exports.DialogDescription = DialogDescription;
18139
+ exports.DialogFooter = DialogFooter;
18140
+ exports.DialogHeader = DialogHeader;
18141
+ exports.DialogOverlay = DialogOverlay;
18142
+ exports.DialogPortal = DialogPortal;
18143
+ exports.DialogTitle = DialogTitle;
18144
+ exports.DialogTrigger = DialogTrigger;
17933
18145
  exports.DropdownMenu = DropdownMenu;
17934
18146
  exports.DropdownMenuContent = DropdownMenuContent;
17935
18147
  exports.DropdownMenuGroup = DropdownMenuGroup;
@@ -17941,6 +18153,7 @@ exports.DropdownMenuShortcut = DropdownMenuShortcut;
17941
18153
  exports.DropdownMenuTrigger = DropdownMenuTrigger;
17942
18154
  exports.EmptyState = EmptyState;
17943
18155
  exports.Field = Field;
18156
+ exports.FormPage = FormPage;
17944
18157
  exports.HeaderActions = HeaderActions;
17945
18158
  exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
17946
18159
  exports.HeaderMobileTrigger = HeaderMobileTrigger;
@@ -17993,6 +18206,17 @@ exports.datePickerValueClass = datePickerValueClass;
17993
18206
  exports.datePickerWeekClass = datePickerWeekClass;
17994
18207
  exports.datePickerWeekdayClass = datePickerWeekdayClass;
17995
18208
  exports.datePickerWeekdaysClass = datePickerWeekdaysClass;
18209
+ exports.detailPageBaseClass = detailPageBaseClass;
18210
+ exports.detailPageBodyClass = detailPageBodyClass;
18211
+ exports.detailPageEmptyClass = detailPageEmptyClass;
18212
+ exports.detailPageSkeletonRowClass = detailPageSkeletonRowClass;
18213
+ exports.dialogCloseButtonClass = dialogCloseButtonClass;
18214
+ exports.dialogContentClass = dialogContentClass;
18215
+ exports.dialogDescriptionClass = dialogDescriptionClass;
18216
+ exports.dialogFooterClass = dialogFooterClass;
18217
+ exports.dialogHeaderClass = dialogHeaderClass;
18218
+ exports.dialogOverlayClass = dialogOverlayClass;
18219
+ exports.dialogTitleClass = dialogTitleClass;
17996
18220
  exports.dropdownMenuContentClass = dropdownMenuContentClass;
17997
18221
  exports.dropdownMenuItemBaseClass = dropdownMenuItemBaseClass;
17998
18222
  exports.dropdownMenuItemInsetClass = dropdownMenuItemInsetClass;
@@ -18007,6 +18231,10 @@ exports.emptyStateDescriptionSizeClass = emptyStateDescriptionSizeClass;
18007
18231
  exports.emptyStateIconWrapperBaseClass = emptyStateIconWrapperBaseClass;
18008
18232
  exports.emptyStateIconWrapperSizeClass = emptyStateIconWrapperSizeClass;
18009
18233
  exports.emptyStateTitleSizeClass = emptyStateTitleSizeClass;
18234
+ exports.formPageActionsBarClass = formPageActionsBarClass;
18235
+ exports.formPageBaseClass = formPageBaseClass;
18236
+ exports.formPageBodyClass = formPageBodyClass;
18237
+ exports.formPageSkeletonRowClass = formPageSkeletonRowClass;
18010
18238
  exports.inputBaseClass = inputBaseClass;
18011
18239
  exports.inputSizeClass = inputSizeClass;
18012
18240
  exports.inputVariantClass = inputVariantClass;