@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/base/src/components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import * as React from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Menubar({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+	return (
+		<MenubarPrimitive.Root
+			data-slot="menubar"
+			className={cn(
+				"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarMenu({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+	return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+	return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+	return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+	return (
+		<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+	);
+}
+
+function MenubarTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+	return (
+		<MenubarPrimitive.Trigger
+			data-slot="menubar-trigger"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarContent({
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+	return (
+		<MenubarPortal>
+			<MenubarPrimitive.Content
+				data-slot="menubar-content"
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPortal>
+	);
+}
+
+function MenubarItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<MenubarPrimitive.Item
+			data-slot="menubar-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+	return (
+		<MenubarPrimitive.CheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.CheckboxItem>
+	);
+}
+
+function MenubarRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+	return (
+		<MenubarPrimitive.RadioItem
+			data-slot="menubar-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.RadioItem>
+	);
+}
+
+function MenubarLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<MenubarPrimitive.Label
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+	return (
+		<MenubarPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSub({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+	return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<MenubarPrimitive.SubTrigger
+			data-slot="menubar-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto h-4 w-4" />
+		</MenubarPrimitive.SubTrigger>
+	);
+}
+
+function MenubarSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+	return (
+		<MenubarPrimitive.SubContent
+			data-slot="menubar-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Menubar,
+	MenubarPortal,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarGroup,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarItem,
+	MenubarShortcut,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent,
+};

package/registry/admin-apps/nextjs/variants/base/src/components/ui/multi-select.tsx

@@ -0,0 +1,381 @@
+// src/components/multi-select.tsx
+
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+	CheckIcon,
+	ChevronDown,
+	WandSparkles,
+	XCircle,
+	XIcon,
+} from "lucide-react";
+import * as React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+const multiSelectVariants = cva(
+	"m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-foreground/10 text-foreground bg-card hover:bg-card/80",
+				secondary:
+					"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				inverted: "inverted",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof multiSelectVariants> {
+	/**
+	 * An array of option objects to be displayed in the multi-select component.
+	 * Each option object has a label, value, and an optional icon.
+	 */
+	options: {
+		/** The text to display for the option. */
+		label: string;
+		/** The unique value associated with the option. */
+		value: string;
+		/** Optional icon component to display alongside the option. */
+		icon?: React.ComponentType<{ className?: string }>;
+	}[];
+
+	/**
+	 * Callback function triggered when the selected values change.
+	 * Receives an array of the new selected values.
+	 */
+	onValueChange: (value: string[]) => void;
+
+	/** The default selected values when the component mounts. */
+	defaultValue?: string[];
+
+	/**
+	 * Placeholder text to be displayed when no values are selected.
+	 * Optional, defaults to "Select options".
+	 */
+	placeholder?: string;
+
+	/**
+	 * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+	 * Optional, defaults to 0 (no animation).
+	 */
+	animation?: number;
+
+	/**
+	 * Maximum number of items to display. Extra selected items will be summarized.
+	 * Optional, defaults to 3.
+	 */
+	maxCount?: number;
+
+	/**
+	 * The modality of the popover. When set to true, interaction with outside elements
+	 * will be disabled and only popover content will be visible to screen readers.
+	 * Optional, defaults to false.
+	 */
+	modalPopover?: boolean;
+
+	/**
+	 * If true, renders the multi-select component as a child of another component.
+	 * Optional, defaults to false.
+	 */
+	asChild?: boolean;
+
+	/**
+	 * Additional class names to apply custom styles to the multi-select component.
+	 * Optional, can be used to add custom styles.
+	 */
+	className?: string;
+}
+
+export const MultiSelect = React.forwardRef<
+	HTMLButtonElement,
+	MultiSelectProps
+>(
+	(
+		{
+			options,
+			onValueChange,
+			variant,
+			defaultValue = [],
+			placeholder = "Select options",
+			animation = 0,
+			maxCount = 3,
+			modalPopover = false,
+			asChild = false,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const [selectedValues, setSelectedValues] =
+			React.useState<string[]>(defaultValue);
+		const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+		const [isAnimating, setIsAnimating] = React.useState(false);
+
+		const handleInputKeyDown = (
+			event: React.KeyboardEvent<HTMLInputElement>,
+		) => {
+			if (event.key === "Enter") {
+				setIsPopoverOpen(true);
+			} else if (event.key === "Backspace" && !event.currentTarget.value) {
+				const newSelectedValues = [...selectedValues];
+				newSelectedValues.pop();
+				setSelectedValues(newSelectedValues);
+				onValueChange(newSelectedValues);
+			}
+		};
+
+		const toggleOption = (option: string) => {
+			const newSelectedValues = selectedValues.includes(option)
+				? selectedValues.filter((value) => value !== option)
+				: [...selectedValues, option];
+			setSelectedValues(newSelectedValues);
+			onValueChange(newSelectedValues);
+		};
+
+		const handleClear = () => {
+			setSelectedValues([]);
+			onValueChange([]);
+		};
+
+		const handleTogglePopover = () => {
+			setIsPopoverOpen((prev) => !prev);
+		};
+
+		const clearExtraOptions = () => {
+			const newSelectedValues = selectedValues.slice(0, maxCount);
+			setSelectedValues(newSelectedValues);
+			onValueChange(newSelectedValues);
+		};
+
+		const toggleAll = () => {
+			if (selectedValues.length === options.length) {
+				handleClear();
+			} else {
+				const allValues = options.map((option) => option.value);
+				setSelectedValues(allValues);
+				onValueChange(allValues);
+			}
+		};
+
+		return (
+			<Popover
+				open={isPopoverOpen}
+				onOpenChange={setIsPopoverOpen}
+				modal={modalPopover}
+			>
+				<PopoverTrigger asChild>
+					<Button
+						ref={ref}
+						{...props}
+						onClick={handleTogglePopover}
+						className={cn(
+							"flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit",
+							className,
+						)}
+					>
+						{selectedValues.length > 0 ? (
+							<div className="flex justify-between items-center w-full">
+								<div className="flex flex-wrap items-center">
+									{selectedValues.slice(0, maxCount).map((value) => {
+										const option = options.find((o) => o.value === value);
+										const IconComponent = option?.icon;
+										return (
+											<Badge
+												key={value}
+												className={cn(
+													isAnimating ? "animate-bounce" : "",
+													multiSelectVariants({ variant }),
+												)}
+												style={{ animationDuration: `${animation}s` }}
+											>
+												{IconComponent && (
+													<IconComponent className="h-4 w-4 mr-2" />
+												)}
+												{option?.label}
+												<XCircle
+													className="ml-2 h-4 w-4 cursor-pointer"
+													onClick={(event) => {
+														event.stopPropagation();
+														toggleOption(value);
+													}}
+												/>
+											</Badge>
+										);
+									})}
+									{selectedValues.length > maxCount && (
+										<Badge
+											className={cn(
+												"bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
+												isAnimating ? "animate-bounce" : "",
+												multiSelectVariants({ variant }),
+											)}
+											style={{ animationDuration: `${animation}s` }}
+										>
+											{`+ ${selectedValues.length - maxCount} more`}
+											<XCircle
+												className="ml-2 h-4 w-4 cursor-pointer"
+												onClick={(event) => {
+													event.stopPropagation();
+													clearExtraOptions();
+												}}
+											/>
+										</Badge>
+									)}
+								</div>
+								<div className="flex items-center justify-between">
+									<XIcon
+										className="h-4 mx-2 cursor-pointer text-muted-foreground"
+										onClick={(event) => {
+											event.stopPropagation();
+											handleClear();
+										}}
+									/>
+									<Separator
+										orientation="vertical"
+										className="flex min-h-6 h-full"
+									/>
+									<ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+								</div>
+							</div>
+						) : (
+							<div className="flex items-center justify-between w-full mx-auto">
+								<span className="text-sm text-muted-foreground mx-3">
+									{placeholder}
+								</span>
+								<ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+							</div>
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					className="w-auto p-0"
+					align="start"
+					onEscapeKeyDown={() => setIsPopoverOpen(false)}
+				>
+					<Command>
+						<CommandInput
+							placeholder="Search..."
+							onKeyDown={handleInputKeyDown}
+						/>
+						<CommandList>
+							<CommandEmpty>No results found.</CommandEmpty>
+							<CommandGroup>
+								<CommandItem
+									key="all"
+									onSelect={toggleAll}
+									className="cursor-pointer"
+								>
+									<div
+										className={cn(
+											"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+											selectedValues.length === options.length
+												? "bg-primary text-primary-foreground"
+												: "opacity-50 [&_svg]:invisible",
+										)}
+									>
+										<CheckIcon className="h-4 w-4" />
+									</div>
+									<span>(Select All)</span>
+								</CommandItem>
+								{options.map((option) => {
+									const isSelected = selectedValues.includes(option.value);
+									return (
+										<CommandItem
+											key={option.value}
+											onSelect={() => toggleOption(option.value)}
+											className="cursor-pointer"
+										>
+											<div
+												className={cn(
+													"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+													isSelected
+														? "bg-primary text-primary-foreground"
+														: "opacity-50 [&_svg]:invisible",
+												)}
+											>
+												<CheckIcon className="h-4 w-4" />
+											</div>
+											{option.icon && (
+												<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+											)}
+											<span>{option.label}</span>
+										</CommandItem>
+									);
+								})}
+							</CommandGroup>
+							<CommandSeparator />
+							<CommandGroup>
+								<div className="flex items-center justify-between">
+									{selectedValues.length > 0 && (
+										<>
+											<CommandItem
+												onSelect={handleClear}
+												className="flex-1 justify-center cursor-pointer"
+											>
+												Clear
+											</CommandItem>
+											<Separator
+												orientation="vertical"
+												className="flex min-h-6 h-full"
+											/>
+										</>
+									)}
+									<CommandItem
+										onSelect={() => setIsPopoverOpen(false)}
+										className="flex-1 justify-center cursor-pointer max-w-full"
+									>
+										Close
+									</CommandItem>
+								</div>
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+				{animation > 0 && selectedValues.length > 0 && (
+					<WandSparkles
+						className={cn(
+							"cursor-pointer my-2 text-foreground bg-background w-3 h-3",
+							isAnimating ? "" : "text-muted-foreground",
+						)}
+						onClick={() => setIsAnimating(!isAnimating)}
+					/>
+				)}
+			</Popover>
+		);
+	},
+);
+
+MultiSelect.displayName = "MultiSelect";