@dimaan/ui 0.0.14 → 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 +325 -153
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +303 -102
- package/dist/index.d.ts +303 -102
- package/dist/index.js +304 -155
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import * as react from 'react';
|
|
|
3
3
|
import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FormEventHandler, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
|
|
4
4
|
import { LinkProps } from 'react-router-dom';
|
|
5
5
|
import { Locale } from 'react-day-picker';
|
|
6
|
+
import * as RadixDialog from '@radix-ui/react-dialog';
|
|
6
7
|
import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
|
|
7
8
|
import { FieldValues, FieldPath, Control } from 'react-hook-form';
|
|
8
9
|
import * as RadixRadioGroup from '@radix-ui/react-radio-group';
|
|
@@ -443,6 +444,307 @@ interface DatePickerProps {
|
|
|
443
444
|
*/
|
|
444
445
|
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
445
446
|
|
|
447
|
+
type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
|
|
448
|
+
/** Props passed to the routing-library `render` slot of the back button. */
|
|
449
|
+
interface PageHeaderBackRenderProps {
|
|
450
|
+
to?: LinkProps['to'];
|
|
451
|
+
className?: string;
|
|
452
|
+
children: ReactNode;
|
|
453
|
+
onClick?: () => void;
|
|
454
|
+
}
|
|
455
|
+
interface PageHeaderBackProps {
|
|
456
|
+
/** Visible label next to the arrow. Defaults to `"Back"`. */
|
|
457
|
+
label?: ReactNode;
|
|
458
|
+
/** Target to — renders a React Router `<Link>`. */
|
|
459
|
+
to?: LinkProps['to'];
|
|
460
|
+
/** Click handler — renders a `<button>` (or wraps the `render` element). */
|
|
461
|
+
onClick?: () => void;
|
|
462
|
+
/** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
|
|
463
|
+
render?: (props: PageHeaderBackRenderProps) => ReactElement;
|
|
464
|
+
}
|
|
465
|
+
interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
466
|
+
/** Page title (required). */
|
|
467
|
+
title: ReactNode;
|
|
468
|
+
/** Optional secondary text under the title. */
|
|
469
|
+
description?: ReactNode;
|
|
470
|
+
/** Slot above the title for breadcrumbs (e.g. `<Breadcrumbs items={…} />` or your own JSX). */
|
|
471
|
+
breadcrumbs?: ReactNode;
|
|
472
|
+
/** Optional back button rendered above the title row. */
|
|
473
|
+
back?: PageHeaderBackProps;
|
|
474
|
+
/** Slot on the trailing side of the title row — buttons, dropdowns, etc. */
|
|
475
|
+
actions?: ReactNode;
|
|
476
|
+
/** Heading level for the title element. Defaults to `'h1'`. */
|
|
477
|
+
as?: PageHeaderHeadingLevel;
|
|
478
|
+
/** Add a bottom border separator. Default: `false`. */
|
|
479
|
+
bordered?: boolean;
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* Top-of-page header — title, optional description, breadcrumbs, back button,
|
|
483
|
+
* and actions slot. The first thing a user sees on any list / detail / form
|
|
484
|
+
* page in a dashboard.
|
|
485
|
+
*
|
|
486
|
+
* Designed to drop directly into `<DashboardContent>` (or any padded page
|
|
487
|
+
* container). Has no outer padding of its own — the surrounding layout owns
|
|
488
|
+
* spacing.
|
|
489
|
+
*
|
|
490
|
+
* @example List page header with primary action
|
|
491
|
+
* ```tsx
|
|
492
|
+
* <PageHeader
|
|
493
|
+
* title="Users"
|
|
494
|
+
* description="Manage your team members and their roles."
|
|
495
|
+
* actions={<Button onClick={openCreate}>Add user</Button>}
|
|
496
|
+
* bordered
|
|
497
|
+
* />
|
|
498
|
+
* ```
|
|
499
|
+
*
|
|
500
|
+
* @example Detail page header with back button
|
|
501
|
+
* ```tsx
|
|
502
|
+
* <PageHeader
|
|
503
|
+
* title={user.name}
|
|
504
|
+
* description={user.email}
|
|
505
|
+
* back={{
|
|
506
|
+
* label: 'Users',
|
|
507
|
+
* to: '/users',
|
|
508
|
+
* }}
|
|
509
|
+
* actions={
|
|
510
|
+
* <>
|
|
511
|
+
* <Button variant="outline">Edit</Button>
|
|
512
|
+
* <Button variant="destructive">Delete</Button>
|
|
513
|
+
* </>
|
|
514
|
+
* }
|
|
515
|
+
* />
|
|
516
|
+
* ```
|
|
517
|
+
*
|
|
518
|
+
* @example With breadcrumbs slot
|
|
519
|
+
* ```tsx
|
|
520
|
+
* <PageHeader
|
|
521
|
+
* breadcrumbs={
|
|
522
|
+
* <nav aria-label="Breadcrumb">
|
|
523
|
+
* <ol className="flex items-center gap-1">
|
|
524
|
+
* <li><Link to="/">Home</Link></li>
|
|
525
|
+
* <li>/</li>
|
|
526
|
+
* <li>Users</li>
|
|
527
|
+
* </ol>
|
|
528
|
+
* </nav>
|
|
529
|
+
* }
|
|
530
|
+
* title="Users"
|
|
531
|
+
* />
|
|
532
|
+
* ```
|
|
533
|
+
*/
|
|
534
|
+
declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
|
|
535
|
+
|
|
536
|
+
declare const pageHeaderBaseClass = "flex w-full flex-col gap-3";
|
|
537
|
+
/** Adds a bottom border separator below the header. */
|
|
538
|
+
declare const pageHeaderBorderedClass = "border-b border-border pb-4";
|
|
539
|
+
declare const pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
|
|
540
|
+
declare const pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
|
|
541
|
+
declare const pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
|
|
542
|
+
declare const pageHeaderDescriptionClass = "text-sm text-muted-foreground";
|
|
543
|
+
declare const pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
|
|
544
|
+
declare const 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";
|
|
545
|
+
declare const pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
|
|
546
|
+
declare const pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
|
|
547
|
+
|
|
548
|
+
interface DetailPageNotFoundState {
|
|
549
|
+
icon?: ReactNode;
|
|
550
|
+
title?: ReactNode;
|
|
551
|
+
description?: ReactNode;
|
|
552
|
+
/** Override the action slot. Pass `null` to hide it (no default action). */
|
|
553
|
+
action?: ReactNode | null;
|
|
554
|
+
}
|
|
555
|
+
interface DetailPageLabels {
|
|
556
|
+
notFoundTitle?: string;
|
|
557
|
+
notFoundDescription?: string;
|
|
558
|
+
}
|
|
559
|
+
interface DetailPageProps {
|
|
560
|
+
/** Page title (required). Typically the resource name (e.g. "User · Layla Hassan"). */
|
|
561
|
+
title: ReactNode;
|
|
562
|
+
/** Optional secondary text under the title (e.g. status pill, joined date). */
|
|
563
|
+
description?: ReactNode;
|
|
564
|
+
/** Optional back-button config — forwarded straight to `PageHeader.back`. */
|
|
565
|
+
back?: PageHeaderBackProps;
|
|
566
|
+
/** Header action slot — Edit / Archive / Delete buttons. */
|
|
567
|
+
actions?: ReactNode;
|
|
568
|
+
/** Page-header bottom border separator. Defaults to `true` for detail pages. */
|
|
569
|
+
bordered?: boolean;
|
|
570
|
+
/**
|
|
571
|
+
* Show skeleton placeholders in the body while the record is being fetched.
|
|
572
|
+
* Wins over `notFound` so users don't see a flicker of "not found" before
|
|
573
|
+
* the data resolves.
|
|
574
|
+
*/
|
|
575
|
+
isLoading?: boolean;
|
|
576
|
+
/** Number of skeleton rows shown while loading. Defaults to `6`. */
|
|
577
|
+
loadingRowCount?: number;
|
|
578
|
+
/**
|
|
579
|
+
* Render the "not found" empty state instead of `children`. Use when the
|
|
580
|
+
* query resolved successfully but the requested record does not exist
|
|
581
|
+
* (404-style). Ignored while `isLoading` is true.
|
|
582
|
+
*/
|
|
583
|
+
notFound?: boolean;
|
|
584
|
+
/** Customize the not-found surface. Defaults to a `FileQuestion` icon + label-driven copy. */
|
|
585
|
+
notFoundState?: DetailPageNotFoundState;
|
|
586
|
+
/** Localized copy for the default not-found prompt. */
|
|
587
|
+
labels?: DetailPageLabels;
|
|
588
|
+
/** Body content — typically a stack of `<section>` cards / DescriptionList rows. */
|
|
589
|
+
children: ReactNode;
|
|
590
|
+
/** Class applied to the outer wrapper. */
|
|
591
|
+
className?: string;
|
|
592
|
+
/** Class applied to the body container. */
|
|
593
|
+
bodyClassName?: string;
|
|
594
|
+
}
|
|
595
|
+
/**
|
|
596
|
+
* Declarative detail-page template — composes `PageHeader` + a body that
|
|
597
|
+
* renders one of three branches:
|
|
598
|
+
*
|
|
599
|
+
* 1. **`isLoading`** → skeleton rows (wins over everything else).
|
|
600
|
+
* 2. **`notFound`** → `<EmptyState>` with a `FileQuestion` icon.
|
|
601
|
+
* 3. otherwise → `children` (consumer composes their own sections / cards).
|
|
602
|
+
*
|
|
603
|
+
* Pairs with `<ListPage>` (read flow) and `<FormPage>` (write flow) as the
|
|
604
|
+
* third Phase-4 template. RHF-agnostic — no form integration.
|
|
605
|
+
*
|
|
606
|
+
* @example View user
|
|
607
|
+
* ```tsx
|
|
608
|
+
* const { data: user, isLoading } = useUser(id);
|
|
609
|
+
*
|
|
610
|
+
* return (
|
|
611
|
+
* <DetailPage
|
|
612
|
+
* title={user ? `${user.name}` : 'Loading…'}
|
|
613
|
+
* description={user?.role}
|
|
614
|
+
* back={{ to: '/users' }}
|
|
615
|
+
* actions={
|
|
616
|
+
* <>
|
|
617
|
+
* <Button variant="outline" onClick={onArchive}>Archive</Button>
|
|
618
|
+
* <Button onClick={onEdit}>Edit</Button>
|
|
619
|
+
* </>
|
|
620
|
+
* }
|
|
621
|
+
* isLoading={isLoading}
|
|
622
|
+
* notFound={!isLoading && !user}
|
|
623
|
+
* >
|
|
624
|
+
* {user && (
|
|
625
|
+
* <section className="grid gap-4 md:grid-cols-2">…</section>
|
|
626
|
+
* )}
|
|
627
|
+
* </DetailPage>
|
|
628
|
+
* );
|
|
629
|
+
* ```
|
|
630
|
+
*
|
|
631
|
+
* @example Custom not-found
|
|
632
|
+
* ```tsx
|
|
633
|
+
* <DetailPage
|
|
634
|
+
* title="Order"
|
|
635
|
+
* notFound={!order}
|
|
636
|
+
* notFoundState={{
|
|
637
|
+
* title: 'Order does not exist',
|
|
638
|
+
* description: 'It may have been cancelled.',
|
|
639
|
+
* action: <Button onClick={() => navigate('/orders')}>Back to orders</Button>,
|
|
640
|
+
* }}
|
|
641
|
+
* >
|
|
642
|
+
* …
|
|
643
|
+
* </DetailPage>
|
|
644
|
+
* ```
|
|
645
|
+
*/
|
|
646
|
+
declare function DetailPage({ title, description, back, actions, bordered, isLoading, loadingRowCount, notFound, notFoundState, labels: labelsProp, children, className, bodyClassName, }: DetailPageProps): react_jsx_runtime.JSX.Element;
|
|
647
|
+
|
|
648
|
+
/** Outermost wrapper of `DetailPage` — vertical flex column with consistent spacing. */
|
|
649
|
+
declare const detailPageBaseClass = "flex w-full flex-col gap-6";
|
|
650
|
+
/** Body region that wraps either children, the skeleton, or the not-found state. */
|
|
651
|
+
declare const detailPageBodyClass = "flex flex-col gap-6";
|
|
652
|
+
/**
|
|
653
|
+
* Single skeleton row rendered while `isLoading` is true. Tuned to a
|
|
654
|
+
* description-list cell — short width range, comfortable height.
|
|
655
|
+
*/
|
|
656
|
+
declare const detailPageSkeletonRowClass = "h-5 w-full animate-pulse rounded-md bg-muted";
|
|
657
|
+
/** Container around the not-found `<EmptyState>` — matches the ListPage empty surface. */
|
|
658
|
+
declare const detailPageEmptyClass = "rounded-md border border-border bg-card";
|
|
659
|
+
|
|
660
|
+
/**
|
|
661
|
+
* Modal dialog built on `@radix-ui/react-dialog`. Compound API — same shape as
|
|
662
|
+
* `DropdownMenu`. Use for edit/create in-modal flows, confirmations, and any
|
|
663
|
+
* blocking interaction. For destructive confirms specifically, the
|
|
664
|
+
* `AlertDialog` (Phase 2) layer will sit on top of this primitive later.
|
|
665
|
+
*
|
|
666
|
+
* @example Edit-in-modal
|
|
667
|
+
* ```tsx
|
|
668
|
+
* <Dialog>
|
|
669
|
+
* <DialogTrigger asChild>
|
|
670
|
+
* <Button variant="outline">Edit user</Button>
|
|
671
|
+
* </DialogTrigger>
|
|
672
|
+
* <DialogContent>
|
|
673
|
+
* <DialogHeader>
|
|
674
|
+
* <DialogTitle>Edit user</DialogTitle>
|
|
675
|
+
* <DialogDescription>Update the user's profile.</DialogDescription>
|
|
676
|
+
* </DialogHeader>
|
|
677
|
+
* <form onSubmit={handleSubmit}>
|
|
678
|
+
* <Field name="name" label="Name"><Input /></Field>
|
|
679
|
+
* </form>
|
|
680
|
+
* <DialogFooter>
|
|
681
|
+
* <DialogClose asChild>
|
|
682
|
+
* <Button variant="outline">Cancel</Button>
|
|
683
|
+
* </DialogClose>
|
|
684
|
+
* <Button type="submit">Save</Button>
|
|
685
|
+
* </DialogFooter>
|
|
686
|
+
* </DialogContent>
|
|
687
|
+
* </Dialog>
|
|
688
|
+
* ```
|
|
689
|
+
*
|
|
690
|
+
* @example Controlled state
|
|
691
|
+
* ```tsx
|
|
692
|
+
* const [open, setOpen] = useState(false);
|
|
693
|
+
*
|
|
694
|
+
* <Dialog open={open} onOpenChange={setOpen}>
|
|
695
|
+
* <DialogContent>…</DialogContent>
|
|
696
|
+
* </Dialog>
|
|
697
|
+
* ```
|
|
698
|
+
*/
|
|
699
|
+
declare const Dialog: react.FC<RadixDialog.DialogProps>;
|
|
700
|
+
declare const DialogTrigger: react.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
701
|
+
declare const DialogPortal: react.FC<RadixDialog.DialogPortalProps>;
|
|
702
|
+
/** Use inside `DialogFooter` to wire a custom Cancel/Close button. */
|
|
703
|
+
declare const DialogClose: react.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
704
|
+
interface DialogOverlayProps extends ComponentPropsWithoutRef<typeof RadixDialog.Overlay> {
|
|
705
|
+
}
|
|
706
|
+
declare const DialogOverlay: react.ForwardRefExoticComponent<DialogOverlayProps & react.RefAttributes<HTMLDivElement>>;
|
|
707
|
+
interface DialogContentProps extends ComponentPropsWithoutRef<typeof RadixDialog.Content> {
|
|
708
|
+
/** Render the default × close button at the top-end of the panel. Default `true`. */
|
|
709
|
+
showCloseButton?: boolean;
|
|
710
|
+
/** Accessible label for the default close button. Default `'Close'`. */
|
|
711
|
+
closeLabel?: string;
|
|
712
|
+
}
|
|
713
|
+
declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
714
|
+
interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
715
|
+
children: ReactNode;
|
|
716
|
+
}
|
|
717
|
+
declare function DialogHeader({ className, ...props }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
|
|
718
|
+
interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
719
|
+
children: ReactNode;
|
|
720
|
+
}
|
|
721
|
+
declare function DialogFooter({ className, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
|
|
722
|
+
interface DialogTitleProps extends ComponentPropsWithoutRef<typeof RadixDialog.Title> {
|
|
723
|
+
}
|
|
724
|
+
declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
725
|
+
interface DialogDescriptionProps extends ComponentPropsWithoutRef<typeof RadixDialog.Description> {
|
|
726
|
+
}
|
|
727
|
+
declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
728
|
+
|
|
729
|
+
/** Backdrop overlay rendered behind the dialog content. Fades in/out. */
|
|
730
|
+
declare const 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";
|
|
731
|
+
/**
|
|
732
|
+
* Centered content panel. Caps width at `lg` by default — consumers wanting a
|
|
733
|
+
* wider/narrower dialog override via `className`. Zoom + fade animation matches
|
|
734
|
+
* the rest of the kit's overlays (Select, DropdownMenu).
|
|
735
|
+
*/
|
|
736
|
+
declare const 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";
|
|
737
|
+
/** Title + description grouping above the body. */
|
|
738
|
+
declare const dialogHeaderClass = "flex flex-col gap-1.5 text-start";
|
|
739
|
+
/** Dialog title — rendered as the heading and used for aria-labelledby. */
|
|
740
|
+
declare const dialogTitleClass = "text-lg font-semibold text-foreground";
|
|
741
|
+
/** Secondary text linked to the dialog via aria-describedby. */
|
|
742
|
+
declare const dialogDescriptionClass = "text-sm text-muted-foreground";
|
|
743
|
+
/** Action row at the bottom. Reverses on small screens so primary stays on top. */
|
|
744
|
+
declare const dialogFooterClass = "flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end";
|
|
745
|
+
/** Small × button rendered at the top-end of the content panel. */
|
|
746
|
+
declare const 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";
|
|
747
|
+
|
|
446
748
|
type DropdownMenuItemVariant = 'default' | 'destructive';
|
|
447
749
|
declare const 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";
|
|
448
750
|
declare const 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";
|
|
@@ -675,107 +977,6 @@ type FieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPa
|
|
|
675
977
|
*/
|
|
676
978
|
declare function Field<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FieldProps<TValues, TName>): ReactElement;
|
|
677
979
|
|
|
678
|
-
type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
|
|
679
|
-
/** Props passed to the routing-library `render` slot of the back button. */
|
|
680
|
-
interface PageHeaderBackRenderProps {
|
|
681
|
-
to?: LinkProps['to'];
|
|
682
|
-
className?: string;
|
|
683
|
-
children: ReactNode;
|
|
684
|
-
onClick?: () => void;
|
|
685
|
-
}
|
|
686
|
-
interface PageHeaderBackProps {
|
|
687
|
-
/** Visible label next to the arrow. Defaults to `"Back"`. */
|
|
688
|
-
label?: ReactNode;
|
|
689
|
-
/** Target to — renders a React Router `<Link>`. */
|
|
690
|
-
to?: LinkProps['to'];
|
|
691
|
-
/** Click handler — renders a `<button>` (or wraps the `render` element). */
|
|
692
|
-
onClick?: () => void;
|
|
693
|
-
/** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
|
|
694
|
-
render?: (props: PageHeaderBackRenderProps) => ReactElement;
|
|
695
|
-
}
|
|
696
|
-
interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
697
|
-
/** Page title (required). */
|
|
698
|
-
title: ReactNode;
|
|
699
|
-
/** Optional secondary text under the title. */
|
|
700
|
-
description?: ReactNode;
|
|
701
|
-
/** Slot above the title for breadcrumbs (e.g. `<Breadcrumbs items={…} />` or your own JSX). */
|
|
702
|
-
breadcrumbs?: ReactNode;
|
|
703
|
-
/** Optional back button rendered above the title row. */
|
|
704
|
-
back?: PageHeaderBackProps;
|
|
705
|
-
/** Slot on the trailing side of the title row — buttons, dropdowns, etc. */
|
|
706
|
-
actions?: ReactNode;
|
|
707
|
-
/** Heading level for the title element. Defaults to `'h1'`. */
|
|
708
|
-
as?: PageHeaderHeadingLevel;
|
|
709
|
-
/** Add a bottom border separator. Default: `false`. */
|
|
710
|
-
bordered?: boolean;
|
|
711
|
-
}
|
|
712
|
-
/**
|
|
713
|
-
* Top-of-page header — title, optional description, breadcrumbs, back button,
|
|
714
|
-
* and actions slot. The first thing a user sees on any list / detail / form
|
|
715
|
-
* page in a dashboard.
|
|
716
|
-
*
|
|
717
|
-
* Designed to drop directly into `<DashboardContent>` (or any padded page
|
|
718
|
-
* container). Has no outer padding of its own — the surrounding layout owns
|
|
719
|
-
* spacing.
|
|
720
|
-
*
|
|
721
|
-
* @example List page header with primary action
|
|
722
|
-
* ```tsx
|
|
723
|
-
* <PageHeader
|
|
724
|
-
* title="Users"
|
|
725
|
-
* description="Manage your team members and their roles."
|
|
726
|
-
* actions={<Button onClick={openCreate}>Add user</Button>}
|
|
727
|
-
* bordered
|
|
728
|
-
* />
|
|
729
|
-
* ```
|
|
730
|
-
*
|
|
731
|
-
* @example Detail page header with back button
|
|
732
|
-
* ```tsx
|
|
733
|
-
* <PageHeader
|
|
734
|
-
* title={user.name}
|
|
735
|
-
* description={user.email}
|
|
736
|
-
* back={{
|
|
737
|
-
* label: 'Users',
|
|
738
|
-
* to: '/users',
|
|
739
|
-
* }}
|
|
740
|
-
* actions={
|
|
741
|
-
* <>
|
|
742
|
-
* <Button variant="outline">Edit</Button>
|
|
743
|
-
* <Button variant="destructive">Delete</Button>
|
|
744
|
-
* </>
|
|
745
|
-
* }
|
|
746
|
-
* />
|
|
747
|
-
* ```
|
|
748
|
-
*
|
|
749
|
-
* @example With breadcrumbs slot
|
|
750
|
-
* ```tsx
|
|
751
|
-
* <PageHeader
|
|
752
|
-
* breadcrumbs={
|
|
753
|
-
* <nav aria-label="Breadcrumb">
|
|
754
|
-
* <ol className="flex items-center gap-1">
|
|
755
|
-
* <li><Link to="/">Home</Link></li>
|
|
756
|
-
* <li>/</li>
|
|
757
|
-
* <li>Users</li>
|
|
758
|
-
* </ol>
|
|
759
|
-
* </nav>
|
|
760
|
-
* }
|
|
761
|
-
* title="Users"
|
|
762
|
-
* />
|
|
763
|
-
* ```
|
|
764
|
-
*/
|
|
765
|
-
declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
|
|
766
|
-
|
|
767
|
-
declare const pageHeaderBaseClass = "flex w-full flex-col gap-3";
|
|
768
|
-
/** Adds a bottom border separator below the header. */
|
|
769
|
-
declare const pageHeaderBorderedClass = "border-b border-border pb-4";
|
|
770
|
-
declare const pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
|
|
771
|
-
declare const pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
|
|
772
|
-
declare const pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
|
|
773
|
-
declare const pageHeaderDescriptionClass = "text-sm text-muted-foreground";
|
|
774
|
-
declare const pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
|
|
775
|
-
declare const 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";
|
|
776
|
-
declare const pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
|
|
777
|
-
declare const pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
|
|
778
|
-
|
|
779
980
|
interface FormPageProps {
|
|
780
981
|
/** Page title (required). Rendered as an `<h1>` by `PageHeader`. */
|
|
781
982
|
title: ReactNode;
|
|
@@ -1554,4 +1755,4 @@ declare function useDirection(): Direction;
|
|
|
1554
1755
|
|
|
1555
1756
|
declare function cn(...inputs: ClassValue[]): string;
|
|
1556
1757
|
|
|
1557
|
-
export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, FormPage, type FormPageProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageEmptyState, type ListPageFilter, type ListPageLabels, type ListPageProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
|
|
1758
|
+
export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, FormPage, type FormPageProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageEmptyState, type ListPageFilter, type ListPageLabels, type ListPageProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
|