@dimaan/ui 0.0.13 → 0.0.14

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FormEventHandler, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
 import { LinkProps } from 'react-router-dom';
 import { Locale } from 'react-day-picker';
 import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
@@ -675,6 +675,208 @@ type FieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPa
  */
 declare function Field<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FieldProps<TValues, TName>): ReactElement;
 
+type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
+/** Props passed to the routing-library `render` slot of the back button. */
+interface PageHeaderBackRenderProps {
+    to?: LinkProps['to'];
+    className?: string;
+    children: ReactNode;
+    onClick?: () => void;
+}
+interface PageHeaderBackProps {
+    /** Visible label next to the arrow. Defaults to `"Back"`. */
+    label?: ReactNode;
+    /** Target to — renders a React Router `<Link>`. */
+    to?: LinkProps['to'];
+    /** Click handler — renders a `<button>` (or wraps the `render` element). */
+    onClick?: () => void;
+    /** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
+    render?: (props: PageHeaderBackRenderProps) => ReactElement;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Page title (required). */
+    title: ReactNode;
+    /** Optional secondary text under the title. */
+    description?: ReactNode;
+    /** Slot above the title for breadcrumbs (e.g. `<Breadcrumbs items={…} />` or your own JSX). */
+    breadcrumbs?: ReactNode;
+    /** Optional back button rendered above the title row. */
+    back?: PageHeaderBackProps;
+    /** Slot on the trailing side of the title row — buttons, dropdowns, etc. */
+    actions?: ReactNode;
+    /** Heading level for the title element. Defaults to `'h1'`. */
+    as?: PageHeaderHeadingLevel;
+    /** Add a bottom border separator. Default: `false`. */
+    bordered?: boolean;
+}
+/**
+ * Top-of-page header — title, optional description, breadcrumbs, back button,
+ * and actions slot. The first thing a user sees on any list / detail / form
+ * page in a dashboard.
+ *
+ * Designed to drop directly into `<DashboardContent>` (or any padded page
+ * container). Has no outer padding of its own — the surrounding layout owns
+ * spacing.
+ *
+ * @example List page header with primary action
+ * ```tsx
+ * <PageHeader
+ *   title="Users"
+ *   description="Manage your team members and their roles."
+ *   actions={<Button onClick={openCreate}>Add user</Button>}
+ *   bordered
+ * />
+ * ```
+ *
+ * @example Detail page header with back button
+ * ```tsx
+ * <PageHeader
+ *   title={user.name}
+ *   description={user.email}
+ *   back={{
+ *     label: 'Users',
+ *     to: '/users',
+ *   }}
+ *   actions={
+ *     <>
+ *       <Button variant="outline">Edit</Button>
+ *       <Button variant="destructive">Delete</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example With breadcrumbs slot
+ * ```tsx
+ * <PageHeader
+ *   breadcrumbs={
+ *     <nav aria-label="Breadcrumb">
+ *       <ol className="flex items-center gap-1">
+ *         <li><Link to="/">Home</Link></li>
+ *         <li>/</li>
+ *         <li>Users</li>
+ *       </ol>
+ *     </nav>
+ *   }
+ *   title="Users"
+ * />
+ * ```
+ */
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
+
+declare const pageHeaderBaseClass = "flex w-full flex-col gap-3";
+/** Adds a bottom border separator below the header. */
+declare const pageHeaderBorderedClass = "border-b border-border pb-4";
+declare const pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
+declare const pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
+declare const pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
+declare const pageHeaderDescriptionClass = "text-sm text-muted-foreground";
+declare const pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
+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";
+declare const pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
+declare const pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
+
+interface FormPageProps {
+    /** Page title (required). Rendered as an `<h1>` by `PageHeader`. */
+    title: ReactNode;
+    /** Optional secondary text under the title. */
+    description?: ReactNode;
+    /** Optional back-button config — forwarded straight to `PageHeader.back`. */
+    back?: PageHeaderBackProps;
+    /** Page-header bottom border separator. Defaults to `true` for form pages. */
+    bordered?: boolean;
+    /** Form-submit handler. Wire RHF via `form.handleSubmit(onSave)`. */
+    onSubmit: FormEventHandler<HTMLFormElement>;
+    /**
+     * Show skeleton placeholders in the body while the initial record is being
+     * fetched (typical for the edit page). The action bar still renders so the
+     * consumer can offer a "Cancel" exit; the consumer is responsible for
+     * disabling submit buttons while loading.
+     */
+    isLoading?: boolean;
+    /** Number of skeleton rows shown while loading. Defaults to `6`. */
+    loadingRowCount?: number;
+    /**
+     * Action slot rendered inside a sticky bar at the bottom of the form
+     * (Cancel / Save / Save & continue, …). Pass `null` to hide the bar
+     * entirely (rare — usually you want at least a save button).
+     */
+    actions: ReactNode;
+    /** Form body. Compose `<Field>` + your chosen controls, grouped however you like. */
+    children: ReactNode;
+    /** Class applied to the outer wrapper. */
+    className?: string;
+    /** Class applied to the `<form>` element. */
+    formClassName?: string;
+    /** Class applied to the body container that wraps `children`. */
+    bodyClassName?: string;
+    /** Class applied to the sticky action bar. */
+    actionsClassName?: string;
+}
+/**
+ * Declarative form-page template — composes `PageHeader` + a scrollable form
+ * body + a sticky action bar into a single component. **RHF-agnostic**:
+ * `onSubmit` is a plain event handler, so consumers wire react-hook-form (or
+ * any other library) by passing `form.handleSubmit(onSave)`.
+ *
+ * The component expects its parent to provide the scroll context — in the
+ * default `<AppShell>` setup, that's `<DashboardContent>`. The sticky bar
+ * relies on `position: sticky` against that scroll container.
+ *
+ * @example Inside a `<FormProvider>` (RHF + Zod)
+ * ```tsx
+ * const form = useForm<UserDraft>({ resolver: zodResolver(schema), defaultValues });
+ *
+ * return (
+ *   <FormProvider {...form}>
+ *     <FormPage
+ *       title="New user"
+ *       description="Invite a teammate to your workspace."
+ *       back={{ to: '/users' }}
+ *       onSubmit={form.handleSubmit(onSave)}
+ *       actions={
+ *         <>
+ *           <Button type="button" variant="outline" onClick={() => navigate(-1)}>
+ *             Cancel
+ *           </Button>
+ *           <Button type="submit" disabled={form.formState.isSubmitting}>
+ *             Save
+ *           </Button>
+ *         </>
+ *       }
+ *     >
+ *       <div className="grid gap-4 md:grid-cols-2">
+ *         <Field name="name" label="Full name" required><Input /></Field>
+ *         <Field name="email" label="Email" required><Input type="email" /></Field>
+ *       </div>
+ *     </FormPage>
+ *   </FormProvider>
+ * );
+ * ```
+ *
+ * @example Edit mode with `isLoading`
+ * ```tsx
+ * <FormPage title="Edit user" isLoading={query.isLoading} onSubmit={…} actions={…}>
+ *   {…fields…}
+ * </FormPage>
+ * ```
+ */
+declare function FormPage({ title, description, back, bordered, onSubmit, isLoading, loadingRowCount, actions, children, className, formClassName, bodyClassName, actionsClassName, }: FormPageProps): react_jsx_runtime.JSX.Element;
+
+/** Outermost wrapper of `FormPage` — vertical flex column that fills its parent. */
+declare const formPageBaseClass = "flex w-full flex-col gap-6";
+/** Scrollable body region between the header and the sticky action bar. */
+declare const formPageBodyClass = "flex-1";
+/**
+ * Sticky action bar at the bottom of the form. Sits on a `bg-background`
+ * surface with a top border so it visually separates from the form body when
+ * the consumer scrolls. The parent (typically `<DashboardContent>`) is
+ * expected to be the scroll container.
+ */
+declare const 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";
+/** One skeleton row rendered while `isLoading` is true. */
+declare const formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
+
 type DashboardHeaderProps = HTMLAttributes<HTMLElement>;
 declare function DashboardHeader({ className, children, ...props }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -1113,107 +1315,6 @@ interface ListPageProps<T> {
  */
 declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchKeys, filters, enableRowSelection, bulkActions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
 
-type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
-/** Props passed to the routing-library `render` slot of the back button. */
-interface PageHeaderBackRenderProps {
-    to?: LinkProps['to'];
-    className?: string;
-    children: ReactNode;
-    onClick?: () => void;
-}
-interface PageHeaderBackProps {
-    /** Visible label next to the arrow. Defaults to `"Back"`. */
-    label?: ReactNode;
-    /** Target to — renders a React Router `<Link>`. */
-    to?: LinkProps['to'];
-    /** Click handler — renders a `<button>` (or wraps the `render` element). */
-    onClick?: () => void;
-    /** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
-    render?: (props: PageHeaderBackRenderProps) => ReactElement;
-}
-interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
-    /** Page title (required). */
-    title: ReactNode;
-    /** Optional secondary text under the title. */
-    description?: ReactNode;
-    /** Slot above the title for breadcrumbs (e.g. `<Breadcrumbs items={…} />` or your own JSX). */
-    breadcrumbs?: ReactNode;
-    /** Optional back button rendered above the title row. */
-    back?: PageHeaderBackProps;
-    /** Slot on the trailing side of the title row — buttons, dropdowns, etc. */
-    actions?: ReactNode;
-    /** Heading level for the title element. Defaults to `'h1'`. */
-    as?: PageHeaderHeadingLevel;
-    /** Add a bottom border separator. Default: `false`. */
-    bordered?: boolean;
-}
-/**
- * Top-of-page header — title, optional description, breadcrumbs, back button,
- * and actions slot. The first thing a user sees on any list / detail / form
- * page in a dashboard.
- *
- * Designed to drop directly into `<DashboardContent>` (or any padded page
- * container). Has no outer padding of its own — the surrounding layout owns
- * spacing.
- *
- * @example List page header with primary action
- * ```tsx
- * <PageHeader
- *   title="Users"
- *   description="Manage your team members and their roles."
- *   actions={<Button onClick={openCreate}>Add user</Button>}
- *   bordered
- * />
- * ```
- *
- * @example Detail page header with back button
- * ```tsx
- * <PageHeader
- *   title={user.name}
- *   description={user.email}
- *   back={{
- *     label: 'Users',
- *     to: '/users',
- *   }}
- *   actions={
- *     <>
- *       <Button variant="outline">Edit</Button>
- *       <Button variant="destructive">Delete</Button>
- *     </>
- *   }
- * />
- * ```
- *
- * @example With breadcrumbs slot
- * ```tsx
- * <PageHeader
- *   breadcrumbs={
- *     <nav aria-label="Breadcrumb">
- *       <ol className="flex items-center gap-1">
- *         <li><Link to="/">Home</Link></li>
- *         <li>/</li>
- *         <li>Users</li>
- *       </ol>
- *     </nav>
- *   }
- *   title="Users"
- * />
- * ```
- */
-declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
-
-declare const pageHeaderBaseClass = "flex w-full flex-col gap-3";
-/** Adds a bottom border separator below the header. */
-declare const pageHeaderBorderedClass = "border-b border-border pb-4";
-declare const pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
-declare const pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
-declare const pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
-declare const pageHeaderDescriptionClass = "text-sm text-muted-foreground";
-declare const pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
-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";
-declare const pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
-declare const pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
-
 type RadioGroupSize = 'sm' | 'md' | 'lg';
 /** Outer circle (radio button itself) — sized + bordered. */
 declare const radioItemSizeClass: Record<RadioGroupSize, string>;
@@ -1453,4 +1554,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-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, 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, 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 };
+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 };

package/dist/index.js

@@ -16635,6 +16635,126 @@ function mergeRefs2(...refs) {
   };
 }
 
+// src/components/page-header/PageHeader.tsx
+var import_react_router_dom2 = __toESM(require_dist2());
+
+// src/components/page-header/pageHeaderVariants.ts
+var pageHeaderBaseClass = "flex w-full flex-col gap-3";
+var pageHeaderBorderedClass = "border-b border-border pb-4";
+var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
+var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
+var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
+var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
+var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
+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";
+var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
+var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
+var PageHeader = forwardRef(function PageHeader2({
+  title,
+  description,
+  breadcrumbs,
+  back,
+  actions,
+  as = "h1",
+  bordered = false,
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
+        back ? /* @__PURE__ */ jsx(PageHeaderBack, { ...back }) : null,
+        /* @__PURE__ */ jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
+          /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleBlockClass, children: [
+            createElement(
+              as,
+              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+              title
+            ),
+            description ? /* @__PURE__ */ jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
+        ] })
+      ]
+    }
+  );
+});
+function PageHeaderBack({ label = "Back", to, onClick, render }) {
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+  if (render) {
+    return render({
+      to,
+      onClick,
+      className: pageHeaderBackClass,
+      children: inner
+    });
+  }
+  if (to) {
+    return /* @__PURE__ */ jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
+}
+
+// src/components/form-page/formPageVariants.ts
+var formPageBaseClass = "flex w-full flex-col gap-6";
+var formPageBodyClass = "flex-1";
+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";
+var formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
+var DEFAULT_SKELETON_ROW_COUNT = 6;
+function FormPage({
+  title,
+  description,
+  back,
+  bordered = true,
+  onSubmit,
+  isLoading = false,
+  loadingRowCount = DEFAULT_SKELETON_ROW_COUNT,
+  actions,
+  children,
+  className,
+  formClassName,
+  bodyClassName,
+  actionsClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
+    /* @__PURE__ */ jsx(PageHeader, { title, description, back, bordered }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit,
+        "aria-busy": isLoading || void 0,
+        noValidate: true,
+        "data-slot": "form-page-form",
+        className: cn("flex flex-1 flex-col gap-6", formClassName),
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "form-page-body", className: cn(formPageBodyClass, bodyClassName), children: isLoading ? /* @__PURE__ */ jsx(FormPageSkeleton, { rowCount: loadingRowCount }) : children }),
+          actions !== null && actions !== void 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "form-page-actions",
+              className: cn(formPageActionsBarClass, actionsClassName),
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function FormPageSkeleton({ rowCount }) {
+  const rows = Array.from({ length: Math.max(1, rowCount) }, (_, i) => `form-page-skeleton-${i}`);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", "aria-hidden": "true", children: rows.map((key) => /* @__PURE__ */ jsx("div", { "data-testid": "form-page-skeleton-row", className: formPageSkeletonRowClass }, key)) });
+}
+
 // src/components/input/inputVariants.ts
 var inputVariantClass = {
   default: "border border-input bg-background hover:border-ring",
@@ -16750,75 +16870,6 @@ function LanguageSwitcher({
   );
 }
 
-// src/components/page-header/PageHeader.tsx
-var import_react_router_dom2 = __toESM(require_dist2());
-
-// src/components/page-header/pageHeaderVariants.ts
-var pageHeaderBaseClass = "flex w-full flex-col gap-3";
-var pageHeaderBorderedClass = "border-b border-border pb-4";
-var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
-var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
-var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
-var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
-var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
-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";
-var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
-var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
-var PageHeader = forwardRef(function PageHeader2({
-  title,
-  description,
-  breadcrumbs,
-  back,
-  actions,
-  as = "h1",
-  bordered = false,
-  className,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      ref,
-      "data-slot": "page-header",
-      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
-      ...props,
-      children: [
-        breadcrumbs ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
-        back ? /* @__PURE__ */ jsx(PageHeaderBack, { ...back }) : null,
-        /* @__PURE__ */ jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
-          /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleBlockClass, children: [
-            createElement(
-              as,
-              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
-              title
-            ),
-            description ? /* @__PURE__ */ jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
-          ] }),
-          actions ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
-        ] })
-      ]
-    }
-  );
-});
-function PageHeaderBack({ label = "Back", to, onClick, render }) {
-  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx("span", { children: label })
-  ] });
-  if (render) {
-    return render({
-      to,
-      onClick,
-      className: pageHeaderBackClass,
-      children: inner
-    });
-  }
-  if (to) {
-    return /* @__PURE__ */ jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
-}
-
 // src/components/select/selectVariants.ts
 var selectVariantClass = {
   default: "border border-input bg-background hover:border-ring",
@@ -17893,6 +17944,6 @@ react-router-dom/dist/index.js:
    *)
 */
 
-export { AppShell, Avatar, Badge, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, 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, 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 };
+export { AppShell, Avatar, Badge, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map