@lssm/lib.design-system 0.0.0-canary-20251217060433 → 0.0.0-canary-20251217062139

package/dist/ui-kit-web/dist/ui/molecules/SearchAndFilter/SearchAndFilter.js

@@ -0,0 +1,102 @@
+import { Button } from "../../button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../collapsible.js";
+import { FilterSelect } from "../../atoms/FilterSelect/FilterSelect.js";
+import { SearchInput } from "../../atoms/SearchInput/SearchInput.js";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Filter } from "lucide-react";
+
+//#region ../ui-kit-web/dist/ui/molecules/SearchAndFilter/SearchAndFilter.js
+const SearchAndFilter = ({ searchValue, onSearchChange, searchPlaceholder, filters = [], isLoading = false, disabled = false, className = "", collapsible = true, defaultCollapsed = false }) => {
+	const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+	const hasFilters = filters.length > 0;
+	const activeFiltersCount = filters.filter((f) => f.value).length;
+	const shouldUseCollapsible = collapsible && hasFilters;
+	console.log("SearchAndFilter", { filters });
+	const FilterComponents = () => /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+		children: filters.map((filter) => /* @__PURE__ */ jsx(FilterSelect, {
+			value: filter.value,
+			options: filter.options,
+			onChange: filter.onChange,
+			label: filter.label,
+			disabled: disabled || isLoading,
+			showCounts: filter.showCounts,
+			className: "min-w-0"
+		}, filter.key))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `space-y-4 ${className}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 sm:flex-row",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(SearchInput, {
+						value: searchValue,
+						onChange: onSearchChange,
+						placeholder: searchPlaceholder,
+						disabled: disabled || isLoading,
+						className: "w-full"
+					})
+				}), shouldUseCollapsible && /* @__PURE__ */ jsxs(Collapsible, {
+					open: !isCollapsed,
+					onOpenChange: setIsCollapsed,
+					className: "sm:hidden",
+					children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							className: "sm:hidden",
+							disabled: disabled || isLoading,
+							children: [
+								/* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
+								"Filtres",
+								activeFiltersCount > 0 && /* @__PURE__ */ jsx("span", {
+									className: "bg-primary text-primary-foreground ml-2 flex h-5 w-5 items-center justify-center rounded-full text-sm",
+									children: activeFiltersCount
+								}),
+								isCollapsed ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronUp, { className: "ml-2 h-4 w-4" })
+							]
+						})
+					}), /* @__PURE__ */ jsx(CollapsibleContent, {
+						className: "mt-4 space-y-4",
+						children: /* @__PURE__ */ jsx(FilterComponents, {})
+					})]
+				})]
+			}),
+			hasFilters && /* @__PURE__ */ jsx("div", {
+				className: "hidden sm:block",
+				children: /* @__PURE__ */ jsx(FilterComponents, {})
+			}),
+			activeFiltersCount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-base",
+					children: "Filtres actifs:"
+				}), filters.filter((f) => f.value).map((filter) => {
+					const selectedOption = filter.options.find((opt) => opt.value === filter.value);
+					return /* @__PURE__ */ jsxs(Button, {
+						variant: "secondary",
+						size: "sm",
+						onClick: () => filter.onChange(""),
+						disabled: disabled || isLoading,
+						className: "h-7 px-2 text-sm",
+						children: [
+							filter.label,
+							": ",
+							selectedOption?.label,
+							/* @__PURE__ */ jsx("span", {
+								className: "ml-1",
+								children: "×"
+							})
+						]
+					}, filter.key);
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { SearchAndFilter };

package/dist/ui-kit-web/dist/ui/molecules/SkeletonList.js

@@ -0,0 +1,14 @@
+import { Skeleton } from "../skeleton.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../ui-kit-web/dist/ui/molecules/SkeletonList.js
+function SkeletonList({ count = 6, className = "", itemClassName = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `space-y-3 ${className}`,
+		children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: `h-20 rounded-md ${itemClassName}` }, i))
+	});
+}
+
+//#endregion
+export { SkeletonList };

package/dist/ui-kit-web/dist/ui/navigation-menu.js

@@ -0,0 +1,75 @@
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+
+//#region ../ui-kit-web/dist/ui/navigation-menu.js
+init_utils();
+function NavigationMenu({ className, children, viewport = true, ...props }) {
+	return /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Root, {
+		"data-slot": "navigation-menu",
+		"data-viewport": viewport,
+		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+		...props,
+		children: [children, viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
+	});
+}
+function NavigationMenuList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.List, {
+		"data-slot": "navigation-menu-list",
+		className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+		...props
+	});
+}
+function NavigationMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Item, {
+		"data-slot": "navigation-menu-item",
+		className: cn("relative", className),
+		...props
+	});
+}
+const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1");
+function NavigationMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Trigger, {
+		"data-slot": "navigation-menu-trigger",
+		className: cn(navigationMenuTriggerStyle(), "group", className),
+		...props,
+		children: [
+			children,
+			" ",
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Content, {
+		"data-slot": "navigation-menu-content",
+		className: cn("data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", "bg-background group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground data-[state=open]:group-data-[viewport=false]/navigation-menu:animate-in data-[state=closed]:group-data-[viewport=false]/navigation-menu:animate-out data-[state=closed]:group-data-[viewport=false]/navigation-menu:fade-out-0 data-[state=open]:group-data-[viewport=false]/navigation-menu:fade-in-0 data-[state=closed]:group-data-[viewport=false]/navigation-menu:zoom-out-95 data-[state=open]:group-data-[viewport=false]/navigation-menu:zoom-in-95 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow-2xs group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-hidden", className),
+		...props
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute top-full left-0 isolate z-50 flex justify-center"),
+		children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, {
+			"data-slot": "navigation-menu-viewport",
+			className: cn("origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border shadow-2xs md:w-(--radix-navigation-menu-viewport-width)", className),
+			...props
+		})
+	});
+}
+function NavigationMenuLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Link, {
+		"data-slot": "navigation-menu-link",
+		className: cn("hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-xs p-2 text-sm outline-hidden transition-all focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger };

package/dist/ui-kit-web/dist/ui/organisms/ListPage/ListPage.js

@@ -0,0 +1,197 @@
+import { Separator } from "../../separator.js";
+import { Button } from "../../button.js";
+import { HStack, VStack } from "../../stack.js";
+import { Card, CardContent } from "../../card.js";
+import { Pagination } from "../../atoms/Pagination/Pagination.js";
+import { SearchAndFilter } from "../../molecules/SearchAndFilter/SearchAndFilter.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Loader2, Plus, RefreshCcw } from "lucide-react";
+import Link from "next/link";
+
+//#region ../ui-kit-web/dist/ui/organisms/ListPage/ListPage.js
+function ListPage({ title, description, header, items, totalItems, totalPages, isLoading, isFetching, error, listState, searchPlaceholder, filters = [], onRefresh, primaryAction, toolbar, renderItem, renderEmpty, renderStats, className = "", itemClassName = "" }) {
+	const { searchQuery, setSearchQuery, filters: filterValues, setFilter, currentPage, itemsPerPage, setCurrentPage, setItemsPerPage } = listState;
+	if (isLoading && !items.length) return /* @__PURE__ */ jsxs(VStack, {
+		className: `space-y-4 md:space-y-6 ${className}`,
+		children: [header ? header : /* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold md:text-3xl",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-[400px] items-center justify-center",
+			children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex items-center gap-4 p-6",
+				children: [/* @__PURE__ */ jsx(Loader2, { className: "text-primary h-8 w-8 animate-spin" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+					className: "font-medium",
+					children: "Chargement..."
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-base",
+					children: "Récupération des données en cours"
+				})] })]
+			}) })
+		})]
+	});
+	if (error && !items.length) return /* @__PURE__ */ jsxs(VStack, {
+		className: `space-y-4 md:space-y-6 ${className}`,
+		children: [header ? header : /* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold md:text-3xl",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-[400px] items-center justify-center",
+			children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex flex-col items-center gap-4 p-6 text-center",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangle, { className: "text-destructive h-12 w-12" }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium",
+						children: "Erreur de chargement"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-base",
+						children: error.message || "Une erreur est survenue"
+					})] }),
+					onRefresh && /* @__PURE__ */ jsxs(Button, {
+						onClick: onRefresh,
+						variant: "outline",
+						size: "sm",
+						children: [/* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 h-4 w-4" }), "Réessayer"]
+					})
+				]
+			}) })
+		})]
+	});
+	const filterConfigs = filters.map((filter) => ({
+		key: filter.key,
+		label: filter.label,
+		value: filterValues[filter.key] || "",
+		options: filter.options,
+		onChange: (value) => {
+			setFilter(filter.key, value === "all" ? "" : value);
+		},
+		showCounts: filter.showCounts
+	}));
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: `space-y-4 md:space-y-6 ${className}`,
+		children: [
+			header ? header : /* @__PURE__ */ jsxs(HStack, {
+				className: "items-center justify-between",
+				children: [/* @__PURE__ */ jsxs(VStack, {
+					className: "gap-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-bold md:text-3xl",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-base",
+						children: description
+					})]
+				}), /* @__PURE__ */ jsxs(HStack, {
+					className: "items-center gap-4",
+					children: [
+						toolbar,
+						(isLoading || isFetching) && /* @__PURE__ */ jsxs("div", {
+							className: "text-muted-foreground flex items-center gap-2 text-base",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
+								className: "hidden sm:inline",
+								children: "Mise à jour..."
+							})]
+						}),
+						onRefresh && /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onRefresh,
+							disabled: Boolean(isLoading),
+							"aria-label": "Rafraîchir",
+							children: [/* @__PURE__ */ jsx(RefreshCcw, { className: `mr-2 h-4 w-4 ${isLoading || isFetching ? "animate-spin" : ""}` }), /* @__PURE__ */ jsx("span", {
+								className: "hidden sm:inline",
+								children: "Rafraîchir"
+							})]
+						}),
+						primaryAction && /* @__PURE__ */ jsx(Fragment, { children: primaryAction.href ? /* @__PURE__ */ jsx(Link, {
+							href: primaryAction.href,
+							children: /* @__PURE__ */ jsxs(Button, { children: [
+								primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "hidden sm:inline",
+									children: primaryAction.label
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sm:hidden",
+									children: "Nouveau"
+								})
+							] })
+						}) : /* @__PURE__ */ jsxs(Button, {
+							onClick: primaryAction.onClick,
+							children: [
+								primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "hidden sm:inline",
+									children: primaryAction.label
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sm:hidden",
+									children: "Nouveau"
+								})
+							]
+						}) })
+					]
+				})]
+			}),
+			renderStats && /* @__PURE__ */ jsxs(Fragment, { children: [renderStats(items), /* @__PURE__ */ jsx(Separator, {})] }),
+			/* @__PURE__ */ jsx(SearchAndFilter, {
+				searchValue: searchQuery,
+				onSearchChange: setSearchQuery,
+				searchPlaceholder,
+				filters: filterConfigs,
+				isLoading
+			}),
+			items.length === 0 && !isLoading ? renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex flex-col items-center gap-4 p-8 text-center",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "bg-muted flex h-12 w-12 items-center justify-center rounded-full",
+						children: /* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-6 w-6 rounded-full" })
+					}),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium",
+						children: "Aucun élément trouvé"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-base",
+						children: searchQuery || Object.values(filterValues).some((v) => v) ? "Essayez de modifier vos critères de recherche" : "Commencez par créer votre premier élément"
+					})] }),
+					primaryAction && !searchQuery && !Object.values(filterValues).some((v) => v) && /* @__PURE__ */ jsx(Fragment, { children: primaryAction.href ? /* @__PURE__ */ jsx(Link, {
+						href: primaryAction.href,
+						children: /* @__PURE__ */ jsxs(Button, { children: [primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }), primaryAction.label] })
+					}) : /* @__PURE__ */ jsxs(Button, {
+						onClick: primaryAction.onClick,
+						children: [primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }), primaryAction.label]
+					}) })
+				]
+			}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: `space-y-4 ${itemClassName}`,
+				children: items.map((item, index) => renderItem(item, index))
+			}), totalPages > 1 && /* @__PURE__ */ jsx(Pagination, {
+				currentPage,
+				totalPages,
+				totalItems,
+				itemsPerPage,
+				onPageChange: setCurrentPage,
+				onItemsPerPageChange: setItemsPerPage,
+				disabled: isLoading
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { ListPage };

package/dist/ui-kit-web/dist/ui/page-header.js

@@ -0,0 +1,40 @@
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import { HStack, VStack } from "./stack.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region ../ui-kit-web/dist/ui/page-header.js
+init_utils();
+const headerVariants = cva("", {
+	variants: { spacing: {
+		sm: "gap-1",
+		md: "gap-2",
+		lg: "gap-3"
+	} },
+	defaultVariants: { spacing: "md" }
+});
+function PageHeader({ breadcrumb, title, subtitle, actions, spacing, className }) {
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: cn(headerVariants({ spacing }), className),
+		children: [breadcrumb, /* @__PURE__ */ jsxs(HStack, {
+			className: "flex-col items-start justify-between md:flex-row",
+			children: [/* @__PURE__ */ jsxs(VStack, {
+				className: "gap-1",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-semibold md:text-3xl",
+					children: title
+				}), subtitle ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-base",
+					children: subtitle
+				}) : null]
+			}), actions ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: actions
+			}) : null]
+		})]
+	});
+}
+
+//#endregion
+export { PageHeader };

package/dist/ui-kit-web/dist/ui/pagination.js

@@ -0,0 +1,65 @@
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import { buttonVariants } from "./button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+//#region ../ui-kit-web/dist/ui/pagination.js
+init_utils();
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	role: "navigation",
+	"aria-label": "pagination",
+	className: cn("mx-auto flex w-full justify-center", className),
+	...props
+});
+Pagination.displayName = "Pagination";
+const PaginationContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	className: cn("flex flex-row items-center gap-1", className),
+	...props
+}));
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	className: cn("", className),
+	...props
+}));
+PaginationItem.displayName = "PaginationItem";
+const PaginationLink = ({ className, isActive, size = "icon", ...props }) => /* @__PURE__ */ jsx("a", {
+	"aria-current": isActive ? "page" : void 0,
+	className: cn(buttonVariants({
+		variant: isActive ? "outline" : "ghost",
+		size
+	}), className),
+	...props
+});
+PaginationLink.displayName = "PaginationLink";
+const PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs(PaginationLink, {
+	"aria-label": "Go to previous page",
+	size: "default",
+	className: cn("gap-1 pl-2.5", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", { children: "Previous" })]
+});
+PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs(PaginationLink, {
+	"aria-label": "Go to next page",
+	size: "default",
+	className: cn("gap-1 pr-2.5", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })]
+});
+PaginationNext.displayName = "PaginationNext";
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": true,
+	className: cn("flex h-9 w-9 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+//#endregion
+export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/ui-kit-web/dist/ui/radio-group.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { CircleIcon } from "lucide-react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+//#region ../ui-kit-web/dist/ui/radio-group.js
+init_utils();
+function RadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+		"data-slot": "radio-group",
+		className: cn("grid gap-3", className),
+		...props
+	});
+}
+function RadioGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		"data-slot": "radio-group-item",
+		className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "relative flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+		})
+	});
+}
+
+//#endregion
+export { RadioGroup, RadioGroupItem };

package/dist/ui-kit-web/dist/ui/select.js

@@ -0,0 +1,86 @@
+'use client';
+
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region ../ui-kit-web/dist/ui/select.js
+init_utils();
+function Select({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Group, {
+		"data-slot": "select-group",
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input focus-visible:border-ring focus-visible:ring-ring/50 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+		})]
+	});
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+		"data-slot": "select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+		position,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+				className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"),
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	}) });
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		"data-slot": "select-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+	});
+}
+
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue };

package/dist/ui-kit-web/dist/ui/separator.js

@@ -0,0 +1,21 @@
+'use client';
+
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+//#region ../ui-kit-web/dist/ui/separator.js
+init_utils();
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+	return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+		"data-slot": "separator",
+		decorative,
+		orientation,
+		className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+		...props
+	});
+}
+
+//#endregion
+export { Separator };