@dimaan/ui 0.0.13 → 0.0.14

package/dist/index.cjs

@@ -16662,6 +16662,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 = React10.forwardRef(function PageHeader2({
+  title,
+  description,
+  breadcrumbs,
+  back,
+  actions,
+  as = "h1",
+  bordered = false,
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
+        back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
+            React10.createElement(
+              as,
+              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+              title
+            ),
+            description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
+        ] })
+      ]
+    }
+  );
+});
+function PageHeaderBack({ label = "Back", to, onClick, render }) {
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+  ] });
+  if (render) {
+    return render({
+      to,
+      onClick,
+      className: pageHeaderBackClass,
+      children: inner
+    });
+  }
+  if (to) {
+    return /* @__PURE__ */ jsxRuntime.jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, back, bordered }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-slot": "form-page-body", className: cn(formPageBodyClass, bodyClassName), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(FormPageSkeleton, { rowCount: loadingRowCount }) : children }),
+          actions !== null && actions !== void 0 ? /* @__PURE__ */ jsxRuntime.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__ */ 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)) });
+}
+
 // src/components/input/inputVariants.ts
 var inputVariantClass = {
   default: "border border-input bg-background hover:border-ring",
@@ -16777,75 +16897,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 = React10.forwardRef(function PageHeader2({
-  title,
-  description,
-  breadcrumbs,
-  back,
-  actions,
-  as = "h1",
-  bordered = false,
-  className,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "header",
-    {
-      ref,
-      "data-slot": "page-header",
-      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
-      ...props,
-      children: [
-        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
-        back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
-            React10.createElement(
-              as,
-              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
-              title
-            ),
-            description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
-          ] }),
-          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
-        ] })
-      ]
-    }
-  );
-});
-function PageHeaderBack({ label = "Back", to, onClick, render }) {
-  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
-  if (render) {
-    return render({
-      to,
-      onClick,
-      className: pageHeaderBackClass,
-      children: inner
-    });
-  }
-  if (to) {
-    return /* @__PURE__ */ jsxRuntime.jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
-  }
-  return /* @__PURE__ */ jsxRuntime.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",
@@ -17941,6 +17992,7 @@ exports.DropdownMenuShortcut = DropdownMenuShortcut;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
+exports.FormPage = FormPage;
 exports.HeaderActions = HeaderActions;
 exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
 exports.HeaderMobileTrigger = HeaderMobileTrigger;
@@ -18007,6 +18059,10 @@ exports.emptyStateDescriptionSizeClass = emptyStateDescriptionSizeClass;
 exports.emptyStateIconWrapperBaseClass = emptyStateIconWrapperBaseClass;
 exports.emptyStateIconWrapperSizeClass = emptyStateIconWrapperSizeClass;
 exports.emptyStateTitleSizeClass = emptyStateTitleSizeClass;
+exports.formPageActionsBarClass = formPageActionsBarClass;
+exports.formPageBaseClass = formPageBaseClass;
+exports.formPageBodyClass = formPageBodyClass;
+exports.formPageSkeletonRowClass = formPageSkeletonRowClass;
 exports.inputBaseClass = inputBaseClass;
 exports.inputSizeClass = inputSizeClass;
 exports.inputVariantClass = inputVariantClass;