@classic-homes/theme-react 0.1.5 → 0.1.6

package/dist/index.d.mts

@@ -60,10 +60,44 @@ declare const DialogFooter: {
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * PageHeader - Hero/page header component
+ *
+ * A flexible page header component for hero sections and page titles.
+ * Supports multiple layout variants and optional action buttons.
+ *
+ * Features:
+ * - Multiple variants: default, hero, centered
+ * - Optional subtitle with branded styling
+ * - Optional actions slot for CTA buttons
+ * - Consistent typography using design tokens
+ */
+declare const pageHeaderContainerVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageHeaderTitleVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageHeaderSubtitleVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageHeaderActionsVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof pageHeaderContainerVariants> {
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Optional action buttons/content */
+    actions?: React.ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+
 /**
  * Utility function to merge Tailwind CSS classes
  * Uses clsx for conditional classes and tailwind-merge to handle conflicts
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, Separator, badgeVariants, buttonVariants, cn };
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, Separator, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants };

package/dist/index.d.ts

@@ -60,10 +60,44 @@ declare const DialogFooter: {
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * PageHeader - Hero/page header component
+ *
+ * A flexible page header component for hero sections and page titles.
+ * Supports multiple layout variants and optional action buttons.
+ *
+ * Features:
+ * - Multiple variants: default, hero, centered
+ * - Optional subtitle with branded styling
+ * - Optional actions slot for CTA buttons
+ * - Consistent typography using design tokens
+ */
+declare const pageHeaderContainerVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageHeaderTitleVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageHeaderSubtitleVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageHeaderActionsVariants: (props?: ({
+    variant?: "default" | "hero" | "centered" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof pageHeaderContainerVariants> {
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Optional action buttons/content */
+    actions?: React.ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+
 /**
  * Utility function to merge Tailwind CSS classes
  * Uses clsx for conditional classes and tailwind-merge to handle conflicts
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, Separator, badgeVariants, buttonVariants, cn };
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, Separator, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants };

package/dist/index.js

@@ -53,10 +53,15 @@ __export(index_exports, {
   DialogTrigger: () => DialogTrigger,
   Input: () => Input,
   Label: () => Label,
+  PageHeader: () => PageHeader,
   Separator: () => Separator,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
-  cn: () => cn
+  cn: () => cn,
+  pageHeaderActionsVariants: () => pageHeaderActionsVariants,
+  pageHeaderContainerVariants: () => pageHeaderContainerVariants,
+  pageHeaderSubtitleVariants: () => pageHeaderSubtitleVariants,
+  pageHeaderTitleVariants: () => pageHeaderTitleVariants
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -325,6 +330,75 @@ var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/PageHeader.tsx
+var React8 = __toESM(require("react"));
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var pageHeaderContainerVariants = (0, import_class_variance_authority4.cva)("", {
+  variants: {
+    variant: {
+      default: "",
+      hero: "",
+      centered: "text-center"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var pageHeaderTitleVariants = (0, import_class_variance_authority4.cva)("text-foreground", {
+  variants: {
+    variant: {
+      default: "text-3xl font-bold mb-2",
+      hero: "text-5xl font-black uppercase tracking-tight mb-2",
+      centered: "text-4xl font-bold mb-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var pageHeaderSubtitleVariants = (0, import_class_variance_authority4.cva)("text-muted-foreground", {
+  variants: {
+    variant: {
+      default: "text-lg",
+      hero: "text-lg font-serif italic",
+      centered: "text-xl max-w-2xl mx-auto"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var pageHeaderActionsVariants = (0, import_class_variance_authority4.cva)("flex gap-4", {
+  variants: {
+    variant: {
+      default: "mt-4",
+      hero: "mt-6",
+      centered: "mt-6 justify-center"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var PageHeader = React8.forwardRef(
+  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "header",
+    {
+      ref,
+      className: cn(pageHeaderContainerVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -350,8 +424,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
   DialogTrigger,
   Input,
   Label,
+  PageHeader,
   Separator,
   badgeVariants,
   buttonVariants,
-  cn
+  cn,
+  pageHeaderActionsVariants,
+  pageHeaderContainerVariants,
+  pageHeaderSubtitleVariants,
+  pageHeaderTitleVariants
 });

package/dist/index.mjs

@@ -263,6 +263,75 @@ var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/PageHeader.tsx
+import * as React8 from "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var pageHeaderContainerVariants = cva4("", {
+  variants: {
+    variant: {
+      default: "",
+      hero: "",
+      centered: "text-center"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var pageHeaderTitleVariants = cva4("text-foreground", {
+  variants: {
+    variant: {
+      default: "text-3xl font-bold mb-2",
+      hero: "text-5xl font-black uppercase tracking-tight mb-2",
+      centered: "text-4xl font-bold mb-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var pageHeaderSubtitleVariants = cva4("text-muted-foreground", {
+  variants: {
+    variant: {
+      default: "text-lg",
+      hero: "text-lg font-serif italic",
+      centered: "text-xl max-w-2xl mx-auto"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var pageHeaderActionsVariants = cva4("flex gap-4", {
+  variants: {
+    variant: {
+      default: "mt-4",
+      hero: "mt-6",
+      centered: "mt-6 justify-center"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var PageHeader = React8.forwardRef(
+  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ jsxs2(
+    "header",
+    {
+      ref,
+      className: cn(pageHeaderContainerVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx9("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
+        subtitle && /* @__PURE__ */ jsx9("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
+        actions && /* @__PURE__ */ jsx9("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
 export {
   Avatar,
   AvatarFallback,
@@ -287,8 +356,13 @@ export {
   DialogTrigger,
   Input,
   Label,
+  PageHeader,
   Separator,
   badgeVariants,
   buttonVariants,
-  cn
+  cn,
+  pageHeaderActionsVariants,
+  pageHeaderContainerVariants,
+  pageHeaderSubtitleVariants,
+  pageHeaderTitleVariants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React components for the Classic theme system",
   "main": "dist/index.js",
   "module": "dist/index.mjs",