@codefast/ui 0.3.13-canary.3 → 0.3.13-canary.4

package/dist/components/sidebar.d.mts

@@ -0,0 +1,195 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { Button } from "./button.mjs";
+import { Separator } from "./separator.mjs";
+import { Input } from "./input.mjs";
+import { TooltipContent } from "./tooltip.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, Dispatch, JSX, SetStateAction } from "react";
+
+//#region src/components/sidebar.d.ts
+declare const sidebarMenuButtonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  size: {
+    sm: string[];
+    md: string[];
+    lg: string[];
+  };
+  variant: {
+    default: string;
+    outline: string[];
+  };
+}, Record<string, never>>;
+interface SidebarContextValue {
+  isMobile: boolean;
+  open: boolean;
+  openMobile: boolean;
+  setOpen: (open: boolean) => void;
+  setOpenMobile: Dispatch<SetStateAction<boolean>>;
+  state: "collapsed" | "expanded";
+  toggleSidebar: () => void;
+}
+declare const useSidebar: (consumerName: string) => SidebarContextValue;
+interface SidebarProviderProps extends ComponentProps<"div"> {
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+}
+declare function SidebarProvider({
+  children,
+  className,
+  defaultOpen,
+  onOpenChange: setOpenProperty,
+  open: openProperty,
+  style,
+  ...props
+}: SidebarProviderProps): JSX.Element;
+interface SidebarProps extends ComponentProps<"div"> {
+  collapsible?: "icon" | "none" | "offcanvas";
+  side?: "left" | "right";
+  variant?: "floating" | "inset" | "sidebar";
+}
+declare function Sidebar({
+  children,
+  className,
+  collapsible,
+  side,
+  variant,
+  ...props
+}: SidebarProps): JSX.Element;
+type SidebarTriggerProps = ComponentProps<typeof Button>;
+declare function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: SidebarTriggerProps): JSX.Element;
+type SidebarRailProps = ComponentProps<"button">;
+declare function SidebarRail({
+  className,
+  ...props
+}: SidebarRailProps): JSX.Element;
+type SidebarInsetProps = ComponentProps<"main">;
+declare function SidebarInset({
+  className,
+  ...props
+}: SidebarInsetProps): JSX.Element;
+type SidebarInputProps = ComponentProps<typeof Input>;
+declare function SidebarInput({
+  className,
+  ...props
+}: SidebarInputProps): JSX.Element;
+type SidebarHeaderProps = ComponentProps<"div">;
+declare function SidebarHeader({
+  className,
+  ...props
+}: SidebarHeaderProps): JSX.Element;
+type SidebarFooterProps = ComponentProps<"div">;
+declare function SidebarFooter({
+  className,
+  ...props
+}: SidebarFooterProps): JSX.Element;
+type SidebarSeparatorProps = ComponentProps<typeof Separator>;
+declare function SidebarSeparator({
+  className,
+  ...props
+}: SidebarSeparatorProps): JSX.Element;
+type SidebarContentProps = ComponentProps<"div">;
+declare function SidebarContent({
+  className,
+  ...props
+}: SidebarContentProps): JSX.Element;
+type SidebarGroupProps = ComponentProps<"div">;
+declare function SidebarGroup({
+  className,
+  ...props
+}: SidebarGroupProps): JSX.Element;
+interface SidebarGroupLabelProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+}
+declare function SidebarGroupLabel({
+  asChild,
+  className,
+  ...props
+}: SidebarGroupLabelProps): JSX.Element;
+interface SidebarGroupActionProps extends ComponentProps<"button"> {
+  asChild?: boolean;
+}
+declare function SidebarGroupAction({
+  asChild,
+  className,
+  ...props
+}: SidebarGroupActionProps): JSX.Element;
+type SidebarGroupContentProps = ComponentProps<"div">;
+declare function SidebarGroupContent({
+  className,
+  ...props
+}: SidebarGroupContentProps): JSX.Element;
+type SidebarMenuProps = ComponentProps<"ul">;
+declare function SidebarMenu({
+  className,
+  ...props
+}: SidebarMenuProps): JSX.Element;
+type SidebarMenuItemProps = ComponentProps<"li">;
+declare function SidebarMenuItem({
+  className,
+  ...props
+}: SidebarMenuItemProps): JSX.Element;
+interface SidebarMenuButtonProps extends ComponentProps<"button">, VariantProps<typeof sidebarMenuButtonVariants> {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: ComponentProps<typeof TooltipContent> | string;
+}
+declare function SidebarMenuButton({
+  asChild,
+  className,
+  isActive,
+  size,
+  tooltip,
+  variant,
+  ...props
+}: SidebarMenuButtonProps): JSX.Element;
+interface SidebarMenuActionProps extends ComponentProps<"button"> {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}
+declare function SidebarMenuAction({
+  asChild,
+  className,
+  showOnHover,
+  ...props
+}: SidebarMenuActionProps): JSX.Element;
+type SidebarMenuBadgeProps = ComponentProps<"div">;
+declare function SidebarMenuBadge({
+  className,
+  ...props
+}: SidebarMenuBadgeProps): JSX.Element;
+interface SidebarMenuSkeletonProps extends ComponentProps<"div"> {
+  showIcon?: boolean;
+}
+declare function SidebarMenuSkeleton({
+  className,
+  showIcon,
+  ...props
+}: SidebarMenuSkeletonProps): JSX.Element;
+type SidebarMenuSubProps = ComponentProps<"ul">;
+declare function SidebarMenuSub({
+  className,
+  ...props
+}: SidebarMenuSubProps): JSX.Element;
+type SidebarMenuSubItemProps = ComponentProps<"li">;
+declare function SidebarMenuSubItem({
+  className,
+  ...props
+}: SidebarMenuSubItemProps): JSX.Element;
+interface SidebarMenuSubButtonProps extends ComponentProps<"a"> {
+  asChild?: boolean;
+  isActive?: boolean;
+  size?: "md" | "sm";
+}
+declare function SidebarMenuSubButton({
+  asChild,
+  className,
+  isActive,
+  size,
+  ...props
+}: SidebarMenuSubButtonProps): JSX.Element;
+//#endregion
+export { Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, SidebarGroupAction, type SidebarGroupActionProps, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarInput, type SidebarInputProps, SidebarInset, type SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSkeleton, type SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, type SidebarRailProps, SidebarSeparator, type SidebarSeparatorProps, SidebarTrigger, type SidebarTriggerProps, sidebarMenuButtonVariants, useSidebar };

package/dist/components/sidebar.mjs

@@ -0,0 +1,375 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { Button } from "./button.mjs";
+import { Separator } from "./separator.mjs";
+import { Input } from "./input.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
+import { Skeleton } from "./skeleton.mjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.mjs";
+import { useIsMobile } from "../hooks/use-is-mobile.mjs";
+import { Slot } from "@radix-ui/react-slot";
+import { PanelLeftIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { createContext } from "@radix-ui/react-context";
+//#region src/components/sidebar.tsx
+const sidebarMenuButtonVariants = tv({
+	base: [
+		"peer/menu-button flex w-full items-center gap-2 overflow-hidden p-2",
+		"rounded-md ring-sidebar-ring outline-hidden",
+		"text-left text-sm",
+		"transition-[width,height,padding]",
+		"group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+		"group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!",
+		"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+		"focus-visible:ring-3",
+		"active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+		"disabled:pointer-events-none disabled:opacity-50",
+		"aria-disabled:pointer-events-none aria-disabled:opacity-50",
+		"data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground",
+		"data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground",
+		"[&>span:last-child]:truncate",
+		"[&>svg]:size-4 [&>svg]:shrink-0"
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			sm: ["h-7", "text-xs"],
+			md: ["h-8", "text-sm"],
+			lg: ["h-12 text-sm", "group-data-[collapsible=icon]:p-0!"]
+		},
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: ["bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))]", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"]
+		}
+	}
+});
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3.0625rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const [SidebarContextProvider, useSidebar] = createContext("SidebarProvider");
+function SidebarProvider({ children, className, defaultOpen = true, onOpenChange: setOpenProperty, open: openProperty, style, ...props }) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = useState(false);
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const open = openProperty ?? isOpen;
+	const setOpen = useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProperty) setOpenProperty(openState);
+		else setIsOpen(openState);
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState.toString()}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE.toString()}`;
+	}, [setOpenProperty, open]);
+	const toggleSidebar = useCallback(() => {
+		if (isMobile) setOpenMobile((currentValue) => !currentValue);
+		else setOpen((currentValue) => !currentValue);
+	}, [isMobile, setOpen]);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [toggleSidebar]);
+	return /* @__PURE__ */ jsx(SidebarContextProvider, {
+		isMobile,
+		open,
+		openMobile,
+		setOpen,
+		setOpenMobile,
+		state: open ? "expanded" : "collapsed",
+		toggleSidebar,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("group/sidebar-wrapper flex min-h-svh w-full", "has-data-[variant=inset]:bg-sidebar", className),
+				"data-slot": "sidebar-wrapper",
+				style: {
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...style
+				},
+				...props,
+				children
+			})
+		})
+	});
+}
+const SIDEBAR_NAME = "Sidebar";
+function Sidebar({ children, className, collapsible = "offcanvas", side = "left", variant = "sidebar", ...props }) {
+	const { isMobile, openMobile, setOpenMobile, state } = useSidebar(SIDEBAR_NAME);
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full w-(--sidebar-width) flex-col", "bg-sidebar text-sidebar-foreground", className),
+		"data-slot": "sidebar",
+		...props,
+		children
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			className: cn("w-(--sidebar-width) p-0", "bg-sidebar text-sidebar-foreground", "[&>button]:hidden"),
+			"data-mobile": "true",
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			side,
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group peer hidden", "text-sidebar-foreground", "md:block", className),
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-side": side,
+		"data-slot": "sidebar",
+		"data-state": state,
+		"data-variant": variant,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("relative", "w-(--sidebar-width)", "bg-transparent", "transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-side-right:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+			"data-slot": "sidebar-gap"
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-y-0 z-10 hidden", "h-svh w-(--sidebar-width)", "transition-[left,right,width] duration-200 ease-linear", "md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-side-right:border-l group-data-side-left:border-r", className),
+			"data-slot": "sidebar-container",
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex h-full w-full flex-col", "bg-sidebar", "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"),
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				children
+			})
+		})]
+	});
+}
+const SIDEBAR_TRIGGER_NAME = "SidebarTrigger";
+function SidebarTrigger({ className, onClick, ...props }) {
+	const { toggleSidebar } = useSidebar(SIDEBAR_TRIGGER_NAME);
+	return /* @__PURE__ */ jsxs(Button, {
+		className: cn("size-7", className),
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		size: "icon",
+		variant: "ghost",
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+}
+const SIDEBAR_RAIL_NAME = "SidebarRail";
+function SidebarRail({ className, ...props }) {
+	const { toggleSidebar } = useSidebar(SIDEBAR_RAIL_NAME);
+	return /* @__PURE__ */ jsx("button", {
+		className: cn("absolute inset-y-0 z-20 hidden", "w-4 -translate-x-1/2 transition-all ease-linear", "in-data-side-right:cursor-e-resize", "in-data-side-left:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", "group-data-side-right:left-0", "group-data-side-left:-right-4", "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5", "group-data-[collapsible=offcanvas]:after:left-full", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "hover:after:bg-sidebar-border", "sm:flex", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize", className),
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		title: "Toggle Sidebar",
+		type: "button",
+		onClick: toggleSidebar,
+		...props
+	});
+}
+function SidebarInset({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("relative flex w-full min-w-0 flex-1 flex-col", "bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm", "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+		"data-slot": "sidebar-inset",
+		...props
+	});
+}
+function SidebarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn("h-8 w-full", "bg-background shadow-none", className),
+		"data-sidebar": "input",
+		"data-slot": "sidebar-input",
+		...props
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2", "p-2", className),
+		"data-sidebar": "header",
+		"data-slot": "sidebar-header",
+		...props
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2", "p-2", className),
+		"data-sidebar": "footer",
+		"data-slot": "sidebar-footer",
+		...props
+	});
+}
+function SidebarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn("mx-2 w-auto", "bg-sidebar-border", className),
+		"data-sidebar": "separator",
+		"data-slot": "sidebar-separator",
+		...props
+	});
+}
+function SidebarContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", "group-data-[collapsible=icon]:overflow-hidden", className),
+		"data-sidebar": "content",
+		"data-slot": "sidebar-content",
+		...props
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative flex w-full min-w-0 flex-col", "p-2", className),
+		"data-sidebar": "group",
+		"data-slot": "sidebar-group",
+		...props
+	});
+}
+function SidebarGroupLabel({ asChild = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		className: cn("flex h-8 shrink-0 items-center px-2", "rounded-md ring-sidebar-ring outline-hidden", "truncate text-xs font-medium text-sidebar-foreground/70", "transition-[margin,opacity] duration-200 ease-linear", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", "focus-visible:ring-3", "[&>svg]:size-4 [&>svg]:shrink-0", className),
+		"data-sidebar": "group-label",
+		"data-slot": "sidebar-group-label",
+		...props
+	});
+}
+function SidebarGroupAction({ asChild = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center p-0", "rounded-md ring-sidebar-ring outline-hidden", "text-sidebar-foreground", "transition-transform", "group-data-[collapsible=icon]:hidden", "after:absolute after:-inset-2", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "focus-visible:ring-3", "md:after:hidden", "[&>svg]:size-4 [&>svg]:shrink-0", className),
+		"data-sidebar": "group-action",
+		"data-slot": "sidebar-group-action",
+		...props
+	});
+}
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full", "text-sm", className),
+		"data-sidebar": "group-content",
+		"data-slot": "sidebar-group-content",
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("flex w-full min-w-0 flex-col gap-1", className),
+		"data-sidebar": "menu",
+		"data-slot": "sidebar-menu",
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: cn("group/menu-item relative", className),
+		"data-sidebar": "menu-item",
+		"data-slot": "sidebar-menu-item",
+		...props
+	});
+}
+const SIDEBAR_MENU_BUTTON_NAME = "SidebarMenuButton";
+function SidebarMenuButton({ asChild = false, className, isActive = false, size = "md", tooltip, variant = "default", ...props }) {
+	const Component = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar(SIDEBAR_MENU_BUTTON_NAME);
+	const button = /* @__PURE__ */ jsx(Component, {
+		className: cn(sidebarMenuButtonVariants({
+			size,
+			variant
+		}), className),
+		"data-active": isActive,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-slot": "sidebar-menu-button",
+		...props
+	});
+	if (!tooltip) return button;
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		side: "right",
+		...tooltip
+	})] });
+}
+function SidebarMenuAction({ asChild = false, className, showOnHover = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center p-0", "rounded-md ring-sidebar-ring outline-hidden", "text-sidebar-foreground", "transition-transform", "group-data-[collapsible=icon]:hidden", "peer-hover/menu-button:text-sidebar-accent-foreground", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "peer-data-[size=sm]/menu-button:top-1", "after:absolute after:-inset-2", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "focus-visible:ring-3", "md:after:hidden", "[&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0 data-open:opacity-100", className),
+		"data-sidebar": "menu-action",
+		"data-slot": "sidebar-menu-action",
+		...props
+	});
+}
+function SidebarMenuBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute right-1 flex h-5 min-w-5 items-center justify-center px-1", "rounded-md", "text-xs font-medium text-sidebar-foreground tabular-nums", "pointer-events-none select-none", "group-data-[collapsible=icon]:hidden", "peer-hover/menu-button:text-sidebar-accent-foreground", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "peer-data-[size=sm]/menu-button:top-1", "peer-data-active/menu-button:text-sidebar-accent-foreground", className),
+		"data-sidebar": "menu-badge",
+		"data-slot": "sidebar-menu-badge",
+		...props
+	});
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+	const [width] = useState(() => `${String(Math.floor(Math.random() * 40) + 50)}%`);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-8 items-center gap-2 px-2", "rounded-md", className),
+		"data-sidebar": "menu-skeleton",
+		"data-slot": "sidebar-menu-skeleton",
+		...props,
+		children: [showIcon ? /* @__PURE__ */ jsx(Skeleton, {
+			className: cn("size-4", "rounded-md"),
+			"data-sidebar": "menu-skeleton-icon"
+		}) : null, /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+}
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("mx-3.5 flex min-w-0 flex-col gap-1 px-2.5 py-0.5", "border-l border-sidebar-border", "translate-x-px", "group-data-[collapsible=icon]:hidden", className),
+		"data-sidebar": "menu-sub",
+		"data-slot": "sidebar-menu-sub",
+		...props
+	});
+}
+function SidebarMenuSubItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: cn("group/menu-sub-item relative", className),
+		"data-sidebar": "menu-sub-item",
+		"data-slot": "sidebar-menu-sub-item",
+		...props
+	});
+}
+function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		className: cn("flex h-7 min-w-0 items-center gap-2 overflow-hidden px-2", "rounded-md ring-sidebar-ring outline-hidden", "text-sidebar-foreground", "-translate-x-px", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "focus-visible:ring-3", "active:bg-sidebar-accent active:text-sidebar-accent-foreground", "disabled:pointer-events-none disabled:opacity-50", "aria-disabled:pointer-events-none aria-disabled:opacity-50", "data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground", "group-data-[collapsible=icon]:hidden", "[&>span:last-child]:truncate", "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", className),
+		"data-active": isActive,
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-slot": "sidebar-menu-sub-button",
+		...props
+	});
+}
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };

package/dist/components/skeleton.d.mts

@@ -0,0 +1,10 @@
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/skeleton.d.ts
+type SkeletonProps = ComponentProps<"div">;
+declare function Skeleton({
+  className,
+  ...props
+}: SkeletonProps): JSX.Element;
+//#endregion
+export { Skeleton, type SkeletonProps };

package/dist/components/skeleton.mjs

@@ -0,0 +1,12 @@
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-lg", "bg-muted", "animate-pulse", className),
+		"data-slot": "skeleton",
+		...props
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/components/slider.d.mts

@@ -0,0 +1,15 @@
+import { ComponentProps, JSX } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+//#region src/components/slider.d.ts
+type SliderProps = ComponentProps<typeof SliderPrimitive.Root>;
+declare function Slider({
+  className,
+  defaultValue,
+  max,
+  min,
+  value,
+  ...props
+}: SliderProps): JSX.Element;
+//#endregion
+export { Slider, type SliderProps };

package/dist/components/slider.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/components/slider.tsx
+function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }) {
+	const _values = useMemo(() => {
+		if (Array.isArray(value)) return value;
+		return Array.isArray(defaultValue) ? defaultValue : [min, max];
+	}, [
+		value,
+		defaultValue,
+		min,
+		max
+	]);
+	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+		className: cn("relative flex w-full items-center", "touch-none select-none", "data-vertical:h-full data-vertical:min-h-44 data-vertical:w-auto data-vertical:flex-col", "data-disabled:opacity-50", className),
+		"data-slot": "slider",
+		defaultValue,
+		max,
+		min,
+		value,
+		...props,
+		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+			className: cn("relative", "w-full grow overflow-hidden", "rounded-full", "bg-input", "data-horizontal:h-1 data-horizontal:w-full", "data-vertical:h-full data-vertical:w-1"),
+			"data-slot": "slider-track",
+			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
+				className: cn("absolute", "bg-primary", "data-horizontal:h-full", "data-vertical:w-full"),
+				"data-slot": "slider-range"
+			})
+		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+			"aria-label": "Volume",
+			className: cn("flex size-4 items-center justify-center", "rounded-full border-2 border-primary", "bg-primary shadow-sm outline-hidden", "after:size-full after:rounded-full after:bg-background after:transition-[width,height]", "focus-visible:ring-4 focus-visible:ring-primary/20", "active:not-data-disabled:after:size-1", "dark:focus-visible:ring-primary/40"),
+			"data-slot": "slider-thumb"
+		}, index))]
+	});
+}
+//#endregion
+export { Slider };

package/dist/components/sonner.d.mts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+import { ToasterProps as ToasterProps$1, toast, useSonner } from "sonner";
+
+//#region src/components/sonner.d.ts
+type ToasterProps = ToasterProps$1;
+declare function Toaster({
+  ...props
+}: ToasterProps): JSX.Element;
+//#endregion
+export { Toaster, type ToasterProps, toast, useSonner };