startx 0.1.5 → 0.1.6

package/packages/cli/tsdown.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
 	platform: "node",
 	external: ["sharp"],
 	noExternal: [/(.*)/],
+	inlineOnly: false,
 	outputOptions: {
 		codeSplitting: false,
 		preserveModules: false,

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

@@ -1,23 +1,23 @@
-import { cn } from '../lib/utils';
-
-export type GridProps = {
-	children: React.ReactNode;
-	grow?: boolean;
-	className?: string;
-};
-
-const Grid = (props: GridProps) => {
-	return (
-		<div
-			className={cn(
-				'grid sm:grid-cols-12 gap-2 grid-cols-1',
-				props.grow ? 'min-h-[calc(100vh-60px)] py-2' : '',
-				props.className,
-			)}
-		>
-			{props.children}
-		</div>
-	);
-};
-
-export { Grid };
+import { cn } from '../lib/utils';
+
+export type GridProps = {
+	children: React.ReactNode;
+	grow?: boolean;
+	className?: string;
+};
+
+const Grid = (props: GridProps) => {
+	return (
+		<div
+			className={cn(
+				'grid sm:grid-cols-12 gap-2 grid-cols-1',
+				props.grow ? 'min-h-[calc(100vh-60px)] py-2' : '',
+				props.className,
+			)}
+		>
+			{props.children}
+		</div>
+	);
+};
+
+export { Grid };

package/packages/ui/src/components/custom/hover-tool.tsx

@@ -1,38 +1,38 @@
-import type { ReactNode } from "react";
-import type { ClassNameValue } from "tailwind-merge";
-
-import { cn } from "../lib/utils";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
-
-const HoverTool = ({
-	children,
-	side,
-	hideHover,
-	content,
-	className,
-	skipDelay,
-	delay,
-}: {
-	delay?: number;
-	hideHover?: boolean;
-	side?: "top" | "bottom" | "left" | "right" | undefined;
-	skipDelay?: number;
-	children: ReactNode;
-	content: ReactNode;
-	className?: ClassNameValue;
-}) => {
-	return (
-		<TooltipProvider delayDuration={delay} skipDelayDuration={skipDelay}>
-			<Tooltip>
-				<TooltipTrigger className={cn(className)}>{children}</TooltipTrigger>
-				{!hideHover && (
-					<TooltipContent className="z-50" style={{ zIndex: 999 }} side={side}>
-						{content}
-					</TooltipContent>
-				)}
-			</Tooltip>
-		</TooltipProvider>
-	);
-};
-
-export { HoverTool };
+import type { ReactNode } from "react";
+import type { ClassNameValue } from "tailwind-merge";
+
+import { cn } from "../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+
+const HoverTool = ({
+	children,
+	side,
+	hideHover,
+	content,
+	className,
+	skipDelay,
+	delay,
+}: {
+	delay?: number;
+	hideHover?: boolean;
+	side?: "top" | "bottom" | "left" | "right" | undefined;
+	skipDelay?: number;
+	children: ReactNode;
+	content: ReactNode;
+	className?: ClassNameValue;
+}) => {
+	return (
+		<TooltipProvider delayDuration={delay} skipDelayDuration={skipDelay}>
+			<Tooltip>
+				<TooltipTrigger className={cn(className)}>{children}</TooltipTrigger>
+				{!hideHover && (
+					<TooltipContent className="z-50" style={{ zIndex: 999 }} side={side}>
+						{content}
+					</TooltipContent>
+				)}
+			</Tooltip>
+		</TooltipProvider>
+	);
+};
+
+export { HoverTool };

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

@@ -1,109 +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 };
+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

@@ -1,37 +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>
-	);
-};
+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

@@ -1,24 +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 };
+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/simple-popover.tsx

@@ -1,29 +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>
-	);
-};
+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

@@ -1,20 +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 };
+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 };