@nixopus/ui - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

src/components/main-page-header.tsx

+import { cn } from '../lib/utils';
+import React from 'react';
+import { TypographyH1, TypographyMuted } from './typography';
+
+export interface MainPageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  description?: string;
+  badge?: React.ReactNode;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  highlightLabel?: boolean;
+}
+
+export function MainPageHeader({
+  className,
+  label,
+  description,
+  badge,
+  actions,
+  children,
+  highlightLabel = true,
+  ...props
+}: MainPageHeaderProps) {
+  return (
+    <div
+      data-slot="main-page-header"
+      className={cn(
+        'flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between mb-8',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <TypographyH1 className={cn(highlightLabel && 'text-primary')}>{label}</TypographyH1>
+          {badge && (
+            <div data-slot="main-page-header-badge" className="shrink-0">
+              {badge}
+            </div>
+          )}
+        </div>
+        {description && (
+          <div data-slot="main-page-header-description" className="mt-1">
+            <TypographyMuted>{description}</TypographyMuted>
+          </div>
+        )}
+        {children && (
+          <div data-slot="main-page-header-content" className={cn(description && 'mt-2')}>
+            {children}
+          </div>
+        )}
+      </div>
+      {actions && (
+        <div
+          data-slot="main-page-header-actions"
+          className="flex items-center gap-2 shrink-0 sm:ml-4"
+        >
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MainPageHeader;

src/components/sub-page-header.tsx

+import { cn } from '../lib/utils';
+import React from 'react';
+
+export interface SubPageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  metadata?: React.ReactNode;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export function SubPageHeader({
+  className,
+  icon,
+  title,
+  metadata,
+  actions,
+  children,
+  ...props
+}: SubPageHeaderProps) {
+  return (
+    <div
+      data-slot="sub-page-header"
+      className={cn(
+        'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-4 flex-1 min-w-0">
+        {icon && (
+          <div data-slot="sub-page-header-icon" className="shrink-0">
+            {icon}
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="text-2xl font-bold tracking-tight">{title}</div>
+          {metadata && (
+            <div data-slot="sub-page-header-metadata" className="mt-1">
+              {metadata}
+            </div>
+          )}
+          {children && (
+            <div
+              data-slot="sub-page-header-content"
+              className={cn(metadata && 'mt-2', !metadata && 'mt-1')}
+            >
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+      {actions && (
+        <div data-slot="sub-page-header-actions" className="flex items-center gap-2 shrink-0">
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SubPageHeader;

dist/index.d.mts

@@ -297,2 +297,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
+interface MainPageHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    description?: string;
+    badge?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    highlightLabel?: boolean;
+}
+declare function MainPageHeader({ className, label, description, badge, actions, children, highlightLabel, ...props }: MainPageHeaderProps): react_jsx_runtime.JSX.Element;
+
 declare function OTPInput({ value, onChange, length, disabled, className }: OTPInputProps): react_jsx_runtime.JSX.Element;
@@ -386,2 +396,11 @@
 
+interface SubPageHeaderProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: React__default.ReactNode;
+    title: React__default.ReactNode;
+    metadata?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+}
+declare function SubPageHeader({ className, icon, title, metadata, actions, children, ...props }: SubPageHeaderProps): react_jsx_runtime.JSX.Element;
+
 declare function Switch({ className, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -535,2 +554,2 @@
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, BadgeGroup, BadgeGroupItem, type BadgeGroupItemProps, type BadgeGroupProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWrapper, type CardWrapperProps, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, type DialogAction, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, type DialogWrapperProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Label, loading as Loading, OTPInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyMuted, TypographyP, TypographySmall, badgeGroupVariants, badgeVariants, bannerVariants, buttonVariants, cn, defineStepper, useFormField };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, BadgeGroup, BadgeGroupItem, type BadgeGroupItemProps, type BadgeGroupProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWrapper, type CardWrapperProps, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, type DialogAction, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, type DialogWrapperProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Label, loading as Loading, MainPageHeader, type MainPageHeaderProps, OTPInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, SubPageHeader, type SubPageHeaderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyMuted, TypographyP, TypographySmall, badgeGroupVariants, badgeVariants, bannerVariants, buttonVariants, cn, defineStepper, useFormField };

dist/index.d.ts

@@ -297,2 +297,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
+interface MainPageHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    description?: string;
+    badge?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    highlightLabel?: boolean;
+}
+declare function MainPageHeader({ className, label, description, badge, actions, children, highlightLabel, ...props }: MainPageHeaderProps): react_jsx_runtime.JSX.Element;
+
 declare function OTPInput({ value, onChange, length, disabled, className }: OTPInputProps): react_jsx_runtime.JSX.Element;
@@ -386,2 +396,11 @@
 
+interface SubPageHeaderProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: React__default.ReactNode;
+    title: React__default.ReactNode;
+    metadata?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+}
+declare function SubPageHeader({ className, icon, title, metadata, actions, children, ...props }: SubPageHeaderProps): react_jsx_runtime.JSX.Element;
+
 declare function Switch({ className, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -535,2 +554,2 @@
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, BadgeGroup, BadgeGroupItem, type BadgeGroupItemProps, type BadgeGroupProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWrapper, type CardWrapperProps, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, type DialogAction, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, type DialogWrapperProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Label, loading as Loading, OTPInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyMuted, TypographyP, TypographySmall, badgeGroupVariants, badgeVariants, bannerVariants, buttonVariants, cn, defineStepper, useFormField };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, BadgeGroup, BadgeGroupItem, type BadgeGroupItemProps, type BadgeGroupProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWrapper, type CardWrapperProps, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, type DialogAction, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, type DialogWrapperProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Label, loading as Loading, MainPageHeader, type MainPageHeaderProps, OTPInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, SubPageHeader, type SubPageHeaderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyMuted, TypographyP, TypographySmall, badgeGroupVariants, badgeVariants, bannerVariants, buttonVariants, cn, defineStepper, useFormField };

package.json

 {
   "name": "@nixopus/ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Nixopus UI component library - Pure React components for building Nixopus applications",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/index.ts

@@ -23,2 +23,3 @@ // Core UI Components (Pure Components)
 export * from './components/loading';
+export * from './components/main-page-header';
 export * from './components/otp-input';
@@ -35,2 +36,3 @@ export * from './components/pagination';
 export * from './components/stepper';
+export * from './components/sub-page-header';
 export * from './components/switch';
@@ -37,0 +39,0 @@ export * from './components/table';

New alerts

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Fixed alerts

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Improved metrics

Total package byte prevSize

856936

2.75%

Number of package files

59

3.51%

Lines of code

10977

2.82%

No dependency changes