startx 0.0.1

package/packages/ui/src/components/custom/image-picker.tsx

@@ -0,0 +1,109 @@
+import { GalleryHorizontal } from 'lucide-react';
+import { useRef } from 'react';
+import { type ChangeEvent, useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+} from '@/components/ui/carousel';
+
+import { cn } from '../lib/utils.js';
+const ImagePicker = ({
+	onChange,
+	defaultValue,
+	disabled,
+	className,
+}: {
+	onChange?: (e: FileList | null) => void;
+	defaultValue?: Blob;
+	disabled?: boolean;
+	className?: string;
+}) => {
+	const getDefaultImage = () => {
+		try {
+			if (!defaultValue) return '';
+			return URL.createObjectURL(defaultValue);
+		} catch (error) {
+			return '';
+		}
+	};
+	const [selectedImage, setSelectedImage] = useState<string[]>(
+		getDefaultImage() ? [getDefaultImage()] : [],
+	);
+
+	const fileInputRef = useRef<HTMLInputElement | null>(null);
+	const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+		if (event.target.files?.[0]) {
+			setSelectedImage(Array.from(event.target.files).map((file) => URL.createObjectURL(file)));
+			const file = event.target.files;
+			onChange?.(file);
+		}
+	};
+	return (
+		<div>
+			<div className="flex items-start w-full aspect-video flex-col gap-2">
+				<div
+					onClick={() => fileInputRef.current?.click()}
+					className={cn(
+						'border-dashed grid place-content-center min-w-full aspect-video border border-gray-300 rounded-md overflow-hidden',
+						className,
+					)}
+				>
+					{selectedImage.length !== 0 ? (
+						<Carousel>
+							<CarouselContent>
+								{selectedImage.map((image) => (
+									<CarouselItem key={image}>
+										<img
+											alt={image}
+											src={image}
+											className="w-full h-full overflow-hidden object-contain transition-transform duration-500 ease-in-out"
+										></img>
+									</CarouselItem>
+								))}
+							</CarouselContent>
+							{selectedImage.length > 1 && (
+								<>
+									<CarouselPrevious className="left-2" />
+									<CarouselNext className="right-2" />
+								</>
+							)}
+						</Carousel>
+					) : (
+						<div className="flex">
+							<input
+								type="file"
+								ref={fileInputRef}
+								id="imageInput"
+								accept="image/*"
+								onChange={handleImageChange}
+								className="hidden"
+								multiple
+							/>
+							<GalleryHorizontal className="text-gray-500 drop-shadow-lg " size={40} />
+						</div>
+					)}
+				</div>
+				<Button
+					type="button"
+					className="px-8 border-dotted"
+					disabled={disabled}
+					onClick={(e) => {
+						// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+						selectedImage.length === 0 ? fileInputRef.current?.click() : setSelectedImage([]);
+						onChange?.(null);
+					}}
+					variant={selectedImage.length > 0 ? 'destructive' : 'outline'}
+				>
+					{selectedImage.length === 0 ? 'Upload image' : 'Remove image'}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export { ImagePicker };

package/packages/ui/src/components/custom/no-content.tsx

@@ -0,0 +1,37 @@
+import { Loader, Scroll } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import { cn } from '../lib/utils';
+
+type NoContentProps = {
+	icon?: ReactNode;
+	label?: string;
+	className?: string;
+	loading?: boolean;
+};
+export const NoContent = (props: NoContentProps) => {
+	if (props.loading) {
+		return (
+			<div
+				className={cn(
+					'h-full w-full flex flex-col gap-2 justify-center items-center',
+					props.className ?? '',
+				)}
+			>
+				<Loader className="animate-spin" />
+				<p className="text-sm text-muted-foreground">loading</p>
+			</div>
+		);
+	}
+	return (
+		<div
+			className={cn(
+				'h-full w-full flex text-sm flex-col gap-2 justify-center items-center',
+				props.className ?? '',
+			)}
+		>
+			{props.icon ?? <Scroll />}
+			<p className=" text-muted-foreground">{props.label ?? 'No Content'}</p>
+		</div>
+	);
+};

package/packages/ui/src/components/custom/page-container.tsx

@@ -0,0 +1,24 @@
+import { type AllHTMLAttributes, forwardRef } from 'react';
+
+const PageContainer = forwardRef<HTMLButtonElement, AllHTMLAttributes<HTMLDivElement>>(
+	(
+		{
+			className,
+
+			...props
+		},
+		ref,
+	) => {
+		return (
+			<main
+				ref={ref}
+				{...props}
+				className={` px-4 py-4 gap-8 xs:px-8  md:px-16 lg:px-32  max-w-screen-2xl m-auto ${className} `}
+			>
+				<>{props.children}</>
+			</main>
+		);
+	},
+);
+PageContainer.displayName = 'PageContainer';
+export { PageContainer };

package/packages/ui/src/components/custom/page-section.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+
+import { cn } from '../lib/utils';
+import { Separator } from '../ui/separator';
+const pageSectionVariant = cva(
+	'flex flex-col space-y-4 rounded-lg  bg-background/70 p-6 md:px-6 px-2 w-full h-full ',
+	{
+		variants: {
+			variant: {
+				default: '',
+				outline: 'border',
+				transparent: 'bg-transparent md:px-0 px-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+type PageSectionProps = {
+	icon?: ReactNode;
+	title: ReactNode;
+	description?: ReactNode;
+	className?: string;
+	children: ReactNode;
+	separator?: boolean;
+	suffixIcon?: ReactNode;
+} & VariantProps<typeof pageSectionVariant>;
+
+const PageSection = ({
+	icon,
+	title,
+	description,
+	className,
+	children,
+	separator,
+	suffixIcon,
+	...props
+}: PageSectionProps) => {
+	return (
+		<section className={cn(pageSectionVariant({ variant: props.variant }), className)} {...props}>
+			<div className="flex gap-1 flex-col">
+				<div className="flex items-center gap-2">
+					{icon ? <div className="h-6 w-6 text-muted-foreground">{icon}</div> : null}
+
+					<span className="text-lg font-semibold">{title}</span>
+					<div className="ml-auto">{suffixIcon}</div>
+				</div>
+				<p className="text-sm text-muted-foreground">{description}</p>
+				{separator ? <Separator className="mt-1" /> : null}
+			</div>
+
+			{children}
+		</section>
+	);
+};
+
+export { PageSection };

package/packages/ui/src/components/custom/simple-popover.tsx

@@ -0,0 +1,29 @@
+import type { ClassNameValue } from 'tailwind-merge';
+
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
+import { cn } from '../lib/utils';
+
+interface SimplePopoverProps {
+	children: React.ReactNode;
+	trigger: React.ReactNode;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	sideOffset?: number;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	className?: ClassNameValue;
+}
+
+export const SimplePopover = (props: SimplePopoverProps) => {
+	return (
+		<Popover open={props.open} onOpenChange={props.onOpenChange}>
+			<PopoverTrigger asChild>{props.trigger}</PopoverTrigger>
+			<PopoverContent
+				side={props.side}
+				sideOffset={props.sideOffset}
+				className={cn(props.className)}
+			>
+				{props.children}
+			</PopoverContent>
+		</Popover>
+	);
+};

package/packages/ui/src/components/custom/switch-component.tsx

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+export type SwitchCases<T extends string> = {
+	[key in T]?: React.ReactNode; // Mapping of cases with the type T
+};
+
+export type SwitchProps<T extends string> = {
+	value: T; // The value to match against the cases
+	cases: SwitchCases<T>; // Cases object with keys as possible values of type T
+	default?: React.ReactNode; // Default component if no case matches
+};
+
+function SwitchComponent<T extends string>(props: SwitchProps<T>) {
+	const { value, cases, default: defaultCase } = props;
+
+	// Render the component matching the value, or the default if none matches
+	return <>{cases[value] ?? defaultCase ?? <div></div>}</>;
+}
+
+export { SwitchComponent };

package/packages/ui/src/components/custom/theme-provider.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Toaster } from 'sonner';
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+	children: React.ReactNode;
+	defaultTheme?: Theme;
+	storageKey?: string;
+};
+
+type ThemeProviderState = {
+	theme: Theme;
+	setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+	theme: 'system',
+	setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export const ThemeProvider = ({
+	children,
+	defaultTheme = 'dark',
+	storageKey = 'vite-ui-theme',
+	...props
+}: ThemeProviderProps) => {
+	const [theme, setTheme] = useState<Theme>(
+		() =>
+			(typeof window !== 'undefined' && (localStorage.getItem(storageKey) as Theme)) ||
+			defaultTheme,
+	);
+
+	useEffect(() => {
+		const root = window.document.documentElement;
+
+		root.classList.remove('light', 'dark');
+
+		if (theme === 'system') {
+			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+				? 'dark'
+				: 'light';
+
+			root.classList.add(systemTheme);
+			return;
+		}
+
+		root.classList.add(theme);
+	}, [theme]);
+
+	const value = {
+		theme,
+		setTheme: (theme: Theme) => {
+			localStorage.setItem(storageKey, theme);
+			setTheme(theme);
+		},
+	};
+
+	return (
+		<ThemeProviderContext.Provider {...props} value={value}>
+			<Toaster richColors />
+			{children}
+		</ThemeProviderContext.Provider>
+	);
+};
+
+export const useTheme = () => {
+	const context = useContext(ThemeProviderContext);
+
+	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+	return context;
+};

package/packages/ui/src/components/custom/typography.tsx

@@ -0,0 +1,111 @@
+import type React from 'react';
+
+import { cn } from '../lib/utils';
+
+interface TypographyProps {
+	children: React.ReactNode; // Text content to display
+	className?: string; // Additional class names for styling
+}
+
+const H1: React.FC<TypographyProps> = ({ children, className }) => (
+	<h1 className={cn('text-4xl font-bold', className)}>{children}</h1>
+);
+
+const H2: React.FC<TypographyProps> = ({ children, className }) => (
+	<h2 className={cn('text-3xl font-semibold', className)}>{children}</h2>
+);
+
+const H3: React.FC<TypographyProps> = ({ children, className }) => (
+	<h3 className={cn('text-2xl font-medium', className)}>{children}</h3>
+);
+
+const H4: React.FC<TypographyProps> = ({ children, className }) => (
+	<h4 className={cn('text-xl font-semibold', className)}>{children}</h4>
+);
+
+const H5: React.FC<TypographyProps> = ({ children, className }) => (
+	<h5 className={cn('text-lg font-medium', className)}>{children}</h5>
+);
+
+const H6: React.FC<TypographyProps> = ({ children, className }) => (
+	<h6 className={cn('font-semibold', className)}>{children}</h6>
+);
+
+const Default: React.FC<TypographyProps> = ({ children, className }) => (
+	<p className={cn(className)}>{children}</p>
+);
+
+const Secondary: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-muted-foreground', className)}>{children}</span>
+);
+
+const Primary: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-primary', className)}>{children}</span>
+);
+
+const Error: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-destructive text-sm', className)}>{children}</span>
+);
+
+const Warning: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-yellow-500 text-sm', className)}>{children}</span>
+);
+
+const Success: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-green-500 text-sm', className)}>{children}</span>
+);
+
+const Hint: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-muted-foreground text-xs', className)}>{children}</span>
+);
+
+const Grayed: React.FC<TypographyProps> = ({ children, className }) => (
+	<p className={cn('text-gray-500', className)}>{children}</p>
+);
+
+const Muted: React.FC<TypographyProps> = ({ children, className }) => (
+	<p className={cn('text-muted', className)}>{children}</p>
+);
+
+const Key: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('font-thin text-xs', className)}>{children}</span>
+);
+
+const Value: React.FC<TypographyProps> = ({ children, className }) => (
+	<span className={cn('text-lg', className)}>{children}</span>
+);
+
+const List: React.FC<TypographyProps & { label?: string }> = ({ children, className, label }) => (
+	<ul className={cn(className)}>
+		{label ? <span className="font-semibold">{label}</span> : null}
+		{children}
+	</ul>
+);
+const Item: React.FC<TypographyProps> = ({ children, className }) => (
+	<li className={cn('ml-6 text-sm list-disc', className)}>{children}</li>
+);
+
+// Combine all typography components into a single object
+const Tp = {
+	h1: H1,
+	h2: H2,
+	h3: H3,
+	h4: H4,
+	h5: H5,
+	h6: H6,
+	default: Default,
+	secondary: Secondary,
+	error: Error,
+	warning: Warning,
+	success: Success,
+	hint: Hint,
+	grayed: Grayed,
+	muted: Muted,
+	key: Key,
+	value: Value,
+	list: List,
+	item: Item,
+	primary: Primary,
+};
+
+export { Tp };