@nixopus/ui - npm Package Compare versions

Comparing version

0.1.26

0.1.27

+64

src/components/wrapper/alert-wrapper.tsx

		import * as React from 'react';
		import { LucideIcon } from 'lucide-react';

		import { cn } from '../../lib/utils';
		import { Alert, AlertDescription, AlertTitle } from '../alert';

		export interface AlertWrapperProps extends Omit<React.ComponentProps<typeof Alert>, 'title' \| 'children'> {
		/**
		* The message/description text displayed in the alert
		*/
		message?: string \| React.ReactNode;
		/**
		* Optional title text displayed above the description
		*/
		title?: string \| React.ReactNode;
		/**
		* Optional icon to display in the alert
		*/
		icon?: LucideIcon;
		/**
		* Variant of the alert
		* @default 'default'
		*/
		variant?: 'default' \| 'destructive';
		/**
		* Custom className for the description
		*/
		descriptionClassName?: string;
		/**
		* Custom className for the title
		*/
		titleClassName?: string;
		/**
		* Custom children (overrides message if provided)
		*/
		children?: React.ReactNode;
		}

		function AlertWrapper({
		className,
		message,
		title,
		icon: Icon,
		variant = 'default',
		descriptionClassName,
		titleClassName,
		children,
		...props
		}: AlertWrapperProps) {
		return (
		<Alert variant={variant} className={className} {...props}>
		{Icon && <Icon />}
		{title && (
		<AlertTitle className={titleClassName}>{title}</AlertTitle>
		)}
		{message && (
		<AlertDescription className={descriptionClassName}>{message}</AlertDescription>
		)}
		{children}
		</Alert>
		);
		}

		export { AlertWrapper };

+142

src/components/wrapper/dropdown-wrapper.tsx

		import * as React from 'react';
		import { LucideIcon } from 'lucide-react';

		import { cn } from '../../lib/utils';
		import {
		DropdownMenu,
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuLabel,
		DropdownMenuSeparator,
		DropdownMenuTrigger,
		} from '../dropdown-menu';

		export interface DropdownMenuItemData {
		/**
		* Unique key for the item
		*/
		key: string;
		/**
		* Label text for the item
		*/
		label: string \| React.ReactNode;
		/**
		* Optional icon to display before the label
		*/
		icon?: LucideIcon;
		/**
		* Click handler for the item
		*/
		onClick?: (e?: React.MouseEvent) => void;
		/**
		* Whether the item is disabled
		*/
		disabled?: boolean;
		/**
		* Variant of the item
		*/
		variant?: 'default' \| 'destructive';
		/**
		* Custom className for the item
		*/
		className?: string;
		}

		export interface DropdownWrapperProps {
		/**
		* The trigger element that opens the dropdown
		*/
		trigger: React.ReactNode;
		/**
		* Array of menu items to display
		*/
		items?: DropdownMenuItemData[];
		/**
		* Optional label/header displayed at the top of the dropdown
		*/
		label?: string \| React.ReactNode;
		/**
		* Optional separator after the label
		*/
		showLabelSeparator?: boolean;
		/**
		* Alignment of the dropdown content
		* @default 'end'
		*/
		align?: 'start' \| 'end' \| 'center';
		/**
		* Custom className for the dropdown content
		*/
		contentClassName?: string;
		/**
		* Click handler for the content container
		*/
		onContentClick?: (e: React.MouseEvent) => void;
		/**
		* Custom children (overrides items if provided)
		*/
		children?: React.ReactNode;
		/**
		* Separator positions (array of indices after which to add separators)
		*/
		separators?: number[];
		}

		function DropdownWrapper({
		trigger,
		items = [],
		label,
		showLabelSeparator = true,
		align = 'end',
		contentClassName,
		onContentClick,
		children,
		separators = [],
		}: DropdownWrapperProps) {
		const renderItems = () => {
		if (children) {
		return children;
		}

		return items.map((item, index) => {
		const Icon = item.icon;
		const shouldShowSeparator = separators.includes(index);

		return (
		<React.Fragment key={item.key}>
		{shouldShowSeparator && <DropdownMenuSeparator />}
		<DropdownMenuItem
		onClick={item.onClick}
		disabled={item.disabled}
		variant={item.variant}
		className={item.className}
		>
		{Icon && <Icon className="mr-2 h-4 w-4" />}
		{typeof item.label === 'string' ? <span>{item.label}</span> : item.label}
		</DropdownMenuItem>
		</React.Fragment>
		);
		});
		};

		return (
		<DropdownMenu>
		<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
		<DropdownMenuContent
		align={align}
		className={contentClassName}
		onClick={onContentClick}
		>
		{label && (
		<>
		<DropdownMenuLabel className="font-normal">{label}</DropdownMenuLabel>
		{showLabelSeparator && <DropdownMenuSeparator />}
		</>
		)}
		{renderItems()}
		</DropdownMenuContent>
		</DropdownMenu>
		);
		}

		export { DropdownWrapper };

+1

-1

package.json

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

+2

-0

src/index.ts

		@@ -54,5 +54,7 @@ // Core UI Components (Pure Components)
		// Wrapper Components
		export * from './components/wrapper/alert-wrapper';
		export * from './components/wrapper/card-wrapper';
		export * from './components/wrapper/collapsible-wrapper';
		export * from './components/wrapper/dialog-wrapper';
		export * from './components/wrapper/dropdown-wrapper';
		export * from './components/wrapper/form-wrapper';
		@@ -59,0 +61,0 @@ export * from './components/wrapper/tabs-wrapper';

dist/index.d.mts