@fea-ui/react 0.0.0-canary.2

package/dist/index.mjs

@@ -0,0 +1,2251 @@
+import { cn, cn as cn$1, tv } from "tailwind-variants";
+import { Accordion, AlertDialog, Avatar, Button, Checkbox, CheckboxGroup, Dialog, Field, Fieldset, Form, Input, Menu, Meter, Popover, Progress, Radio, RadioGroup, Separator, Slider, Switch, Tabs, Toggle } from "@base-ui/react";
+import { LucideAlertTriangle, LucideCheck, LucideCheckCircle, LucideChevronDown, LucideChevronUp, LucideInfo, LucideMenu, LucidePanelLeftClose, LucidePanelLeftOpen, LucideX, LucideXCircle } from "lucide-react";
+import React, { createContext, useCallback, useContext, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/accordion/accordion.context.ts
+const AccordionContext = createContext(null);
+
+//#endregion
+//#region src/components/accordion/accordion.variants.ts
+const accordionVariants = tv({ slots: {
+	content: "accordion__content",
+	header: "accordion__header",
+	item: "accordion__item",
+	panel: "accordion__panel",
+	root: "accordion",
+	trigger: "accordion__trigger",
+	triggerIcon: "accordion__trigger-icon"
+} });
+
+//#endregion
+//#region src/components/accordion/use-accordion.ts
+const useAccordion = () => {
+	const context = useContext(AccordionContext);
+	if (!context) throw new Error("useAccordion must be used within a AccordionProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/accordion/accordion.tsx
+const Accordion$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => accordionVariants({}), []);
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const AccordionItem = ({ className, ...props }) => {
+	const { slots } = useAccordion();
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		className: cn$1(className, slots.item()),
+		...props
+	});
+};
+const AccordionHeader = ({ className, ...props }) => {
+	const { slots } = useAccordion();
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: cn$1(className, slots.header()),
+		...props
+	});
+};
+const AccordionTrigger = ({ className, ...props }) => {
+	const { slots } = useAccordion();
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		className: cn$1(className, slots.trigger()),
+		...props
+	});
+};
+const AccordionTriggerIcon = ({ className, ...props }) => {
+	const { slots } = useAccordion();
+	return /* @__PURE__ */ jsx(LucideChevronDown, {
+		className: cn$1(className, slots.triggerIcon()),
+		...props
+	});
+};
+const AccordionPanel = ({ className, ...props }) => {
+	const { slots } = useAccordion();
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		className: cn$1(className, slots.panel()),
+		...props
+	});
+};
+const AccordionContent = ({ className, ...props }) => {
+	const { slots } = useAccordion();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.content()),
+		...props
+	});
+};
+var accordion_default = Object.assign(Accordion$1, {
+	Content: AccordionContent,
+	Header: AccordionHeader,
+	Item: AccordionItem,
+	Panel: AccordionPanel,
+	Root: Accordion$1,
+	Trigger: AccordionTrigger,
+	TriggerIcon: AccordionTriggerIcon
+});
+
+//#endregion
+//#region src/components/alert/alert.context.ts
+const AlertContext = createContext(null);
+
+//#endregion
+//#region src/components/alert/alert.variants.ts
+const alertVariants = tv({
+	defaultVariants: { variant: "info" },
+	slots: {
+		content: "alert__content",
+		description: "alert__description",
+		indicator: "alert__indicator",
+		root: "alert",
+		title: "alert__title"
+	},
+	variants: { variant: {
+		danger: { root: "alert--danger" },
+		info: { root: "alert--info" },
+		primary: { root: "alert--primary" },
+		success: { root: "alert--success" },
+		warning: { root: "alert--warning" }
+	} }
+});
+
+//#endregion
+//#region src/components/alert/use-alert.ts
+const useAlert = () => {
+	const context = useContext(AlertContext);
+	if (!context) throw new Error("useAlert must be used within a AlertProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/alert/alert.tsx
+const Alert = ({ className, variant, ...props }) => {
+	const slots = useMemo(() => alertVariants({
+		className,
+		variant
+	}), [className, variant]);
+	return /* @__PURE__ */ jsx(AlertContext, {
+		value: {
+			slots,
+			variant
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const AlertIndicator = ({ className, children, ...props }) => {
+	const { slots, variant } = useAlert();
+	const IndicatorIcon = ({ children: children$1 }) => {
+		if (children$1) return children$1;
+		switch (variant) {
+			case "danger": return /* @__PURE__ */ jsx(LucideXCircle, {});
+			case "success": return /* @__PURE__ */ jsx(LucideCheckCircle, {});
+			case "warning": return /* @__PURE__ */ jsx(LucideAlertTriangle, {});
+			default: return /* @__PURE__ */ jsx(LucideInfo, {});
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.indicator()),
+		...props,
+		children: /* @__PURE__ */ jsx(IndicatorIcon, { children })
+	});
+};
+const AlertContent = ({ className, ...props }) => {
+	const { slots } = useAlert();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.content()),
+		...props
+	});
+};
+const AlertTitle = ({ className, ...props }) => {
+	const { slots } = useAlert();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.title()),
+		...props
+	});
+};
+const AlertDescription = ({ className, ...props }) => {
+	const { slots } = useAlert();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.description()),
+		...props
+	});
+};
+var alert_default = Object.assign(Alert, {
+	Content: AlertContent,
+	Description: AlertDescription,
+	Indicator: AlertIndicator,
+	Root: Alert,
+	Title: AlertTitle
+});
+
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.context.ts
+const AlertDialogContext = createContext(null);
+
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.variants.ts
+const alertDialogVariants = tv({ slots: {
+	backdrop: "alert-dialog__backdrop",
+	close: "alert-dialog__close",
+	description: "alert-dialog__description",
+	popup: "alert-dialog__popup",
+	portal: "alert-dialog__portal",
+	root: "alert-dialog",
+	title: "alert-dialog__title",
+	trigger: "alert-dialog__trigger",
+	viewport: "alert-dialog__viewport"
+} });
+
+//#endregion
+//#region src/components/alert-dialog/use-alert-dialog.ts
+const useAlertDialog = () => {
+	const context = useContext(AlertDialogContext);
+	if (!context) throw new Error("useAlertDialog must be used within a AlertDialogProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.tsx
+const AlertDialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialogContext, {
+		value: { slots: useMemo(() => alertDialogVariants(), []) },
+		children: /* @__PURE__ */ jsx(AlertDialog.Root, { ...props })
+	});
+};
+const AlertDialogTrigger = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		className: cn$1(slots.trigger(), className),
+		...props
+	});
+};
+const AlertDialogPortal = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		className: cn$1(slots.portal(), className),
+		...props
+	});
+};
+const AlertDialogBackdrop = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		className: cn$1(slots.backdrop(), className),
+		...props
+	});
+};
+const AlertDialogViewport = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Viewport, {
+		className: cn$1(slots.viewport(), className),
+		...props
+	});
+};
+const AlertDialogPopup = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		className: cn$1(slots.popup(), className),
+		...props
+	});
+};
+const AlertDialogTitle = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		className: cn$1(slots.title(), className),
+		...props
+	});
+};
+const AlertDialogDescription = ({ className, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		className: cn$1(slots.description(), className),
+		...props
+	});
+};
+const AlertDialogClose = ({ className, children, ...props }) => {
+	const { slots } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		className: cn$1(slots.close(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(LucideX, {})
+	});
+};
+var alert_dialog_default = Object.assign(AlertDialog$1, {
+	Backdrop: AlertDialogBackdrop,
+	Close: AlertDialogClose,
+	Description: AlertDialogDescription,
+	Popup: AlertDialogPopup,
+	Portal: AlertDialogPortal,
+	Root: AlertDialog$1,
+	Title: AlertDialogTitle,
+	Trigger: AlertDialogTrigger,
+	Viewport: AlertDialogViewport
+});
+
+//#endregion
+//#region src/components/avatar/avatar.context.ts
+const AvatarContext = createContext(null);
+
+//#endregion
+//#region src/components/avatar/avatar.variants.ts
+const avatarVariants = tv({
+	defaultVariants: { size: "md" },
+	slots: {
+		fallback: "avatar__fallback",
+		image: "avatar__image",
+		root: "avatar"
+	},
+	variants: { size: {
+		lg: { root: "avatar--lg" },
+		md: { root: "avatar--md" },
+		sm: { root: "avatar--sm" }
+	} }
+});
+
+//#endregion
+//#region src/components/avatar/use-avatar.ts
+const useAvatar = () => {
+	const ctx = useContext(AvatarContext);
+	if (!ctx) throw new Error("useAvatar must be used within the Avatar component.");
+	return ctx;
+};
+
+//#endregion
+//#region src/components/avatar/avatar.tsx
+const Avatar$1 = ({ className, size, ...props }) => {
+	const slots = useMemo(() => avatarVariants({ size }), [size]);
+	return /* @__PURE__ */ jsx(AvatarContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Avatar.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const AvatarImage = ({ className, ...props }) => {
+	const { slots } = useAvatar();
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		className: cn$1(className, slots.image()),
+		...props
+	});
+};
+const AvatarFallback = ({ className, ...props }) => {
+	const { slots } = useAvatar();
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		className: cn$1(className, slots.fallback()),
+		...props
+	});
+};
+var avatar_default = Object.assign(Avatar$1, {
+	Fallback: AvatarFallback,
+	Image: AvatarImage,
+	Root: Avatar$1
+});
+
+//#endregion
+//#region src/components/button/button.variants.ts
+const buttonVariants = tv({
+	base: "button",
+	defaultVariants: {
+		isIconOnly: false,
+		size: "md",
+		variant: "primary"
+	},
+	variants: {
+		isIconOnly: { true: "button--icon-only" },
+		size: {
+			lg: "button--lg",
+			md: "button--md",
+			sm: "button--sm"
+		},
+		variant: {
+			danger: "button--danger",
+			ghost: "button--ghost",
+			outline: "button--outline",
+			primary: "button--primary",
+			secondary: "button--secondary"
+		}
+	}
+});
+
+//#endregion
+//#region src/components/button/button.tsx
+const Button$1 = ({ className, variant, size, isIconOnly, ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn$1(buttonVariants({
+			isIconOnly,
+			size,
+			variant
+		}), className),
+		...props
+	});
+};
+var button_default = Button$1;
+
+//#endregion
+//#region src/components/button-group/button-group.variants.ts
+const buttonGroupVariants = tv({ base: "button-group" });
+
+//#endregion
+//#region src/components/button-group/button-group.tsx
+const ButtonGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, buttonGroupVariants()),
+		...props
+	});
+};
+var button_group_default = ButtonGroup;
+
+//#endregion
+//#region src/components/card/card.context.ts
+const CardContext = createContext(null);
+
+//#endregion
+//#region src/components/card/card.variants.ts
+const cardVariants = tv({
+	defaultVariants: { variant: "default" },
+	slots: {
+		body: "card__body",
+		description: "card__description",
+		footer: "card__footer",
+		header: "card__header",
+		root: "card",
+		title: "card__title"
+	},
+	variants: { variant: {
+		default: { root: "card--default" },
+		transparent: { root: "card--transparent" }
+	} }
+});
+
+//#endregion
+//#region src/components/card/use-card.ts
+const useCard = () => {
+	const ctx = useContext(CardContext);
+	if (!ctx) throw new Error("CardContext must be used with in the Card component.");
+	return ctx;
+};
+
+//#endregion
+//#region src/components/card/card.tsx
+const Card = ({ className, variant, ...props }) => {
+	const slots = useMemo(() => cardVariants({ variant }), [variant]);
+	console.log(slots);
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const CardHeader = ({ className, ...props }) => {
+	const { slots } = useCard();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.header()),
+		...props
+	});
+};
+const CardBody = ({ className, ...props }) => {
+	const { slots } = useCard();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.body()),
+		...props
+	});
+};
+const CardFooter = ({ className, ...props }) => {
+	const { slots } = useCard();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, slots.footer()),
+		...props
+	});
+};
+const CardTitle = ({ className, ...props }) => {
+	const { slots } = useCard();
+	return /* @__PURE__ */ jsx("h2", {
+		className: cn$1(className, slots.title()),
+		...props
+	});
+};
+const CardDescription = ({ className, ...props }) => {
+	const { slots } = useCard();
+	return /* @__PURE__ */ jsx("p", {
+		className: cn$1(className, slots.description()),
+		...props
+	});
+};
+/** Exports */
+var card_default = Object.assign(Card, {
+	Body: CardBody,
+	Description: CardDescription,
+	Footer: CardFooter,
+	Header: CardHeader,
+	Root: Card,
+	Title: CardTitle
+});
+
+//#endregion
+//#region src/components/checkbox/checkbox.context.ts
+const CheckboxContext = createContext(null);
+
+//#endregion
+//#region src/components/checkbox/checkbox.variants.ts
+const checkboxVariants = tv({ slots: {
+	indicator: "checkbox__indicator",
+	root: "checkbox"
+} });
+
+//#endregion
+//#region src/components/checkbox/use-checkbox.ts
+const useCheckbox = () => {
+	const context = useContext(CheckboxContext);
+	if (!context) throw new Error("useCheckbox must be used within a CheckboxProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/checkbox/checkbox.tsx
+const Checkbox$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => checkboxVariants({}), []);
+	return /* @__PURE__ */ jsx(CheckboxContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const CheckboxIndicator = ({ className, children, ...props }) => {
+	const { slots } = useCheckbox();
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		className: cn$1(className, slots.indicator()),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(LucideCheck, {})
+	});
+};
+var checkbox_default = Object.assign(Checkbox$1, {
+	Indicator: CheckboxIndicator,
+	Root: Checkbox$1
+});
+
+//#endregion
+//#region src/components/checkbox-group/checkbox-group.variants.ts
+const checkboxGroupVariants = tv({ base: "checkbox-group" });
+
+//#endregion
+//#region src/components/checkbox-group/checkbox-group.tsx
+const CheckboxGroup$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		className: cn$1(className, checkboxGroupVariants()),
+		...props
+	});
+};
+var checkbox_group_default = CheckboxGroup$1;
+
+//#endregion
+//#region src/components/chip/chip.variants.ts
+const chipVariants = tv({
+	base: "chip",
+	defaultVariants: {
+		size: "md",
+		variant: "primary"
+	},
+	variants: {
+		size: {
+			lg: "chip--lg",
+			md: "chip--md",
+			sm: "chip--sm"
+		},
+		variant: {
+			danger: "chip--danger",
+			outline: "chip--outline",
+			primary: "chip--primary",
+			secondary: "chip--secondary",
+			success: "chip--success"
+		}
+	}
+});
+
+//#endregion
+//#region src/components/chip/chip.tsx
+const Chip = ({ className, variant, size, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn$1(className, chipVariants({
+			size,
+			variant
+		})),
+		...props
+	});
+};
+var chip_default = Chip;
+
+//#endregion
+//#region src/components/container/container.variants.ts
+const containerVariants = tv({ base: "container" });
+
+//#endregion
+//#region src/components/container/container.tsx
+const Container = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(className, containerVariants()),
+		...props
+	});
+};
+var container_default = Container;
+
+//#endregion
+//#region src/components/dialog/dialog.context.ts
+const DialogContext = createContext(null);
+
+//#endregion
+//#region src/components/dialog/dialog.variants.ts
+const dialogVariants = tv({ slots: {
+	backdrop: "dialog__backdrop",
+	close: "dialog__close",
+	description: "dialog__description",
+	popup: "dialog__popup",
+	portal: "dialog__portal",
+	root: "dialog",
+	title: "dialog__title",
+	trigger: "dialog__trigger",
+	viewport: "dialog__viewport"
+} });
+
+//#endregion
+//#region src/components/dialog/use-dialog.ts
+const useDialog = () => {
+	const context = useContext(DialogContext);
+	if (!context) throw new Error("useDialog must be used within a DialogProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/dialog/dialog.tsx
+const Dialog$1 = ({ ...props }) => {
+	const slots = useMemo(() => dialogVariants(), []);
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
+	});
+};
+const DialogTrigger = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		className: cn$1(slots.trigger(), className),
+		...props
+	});
+};
+const DialogPortal = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		className: cn$1(slots.portal(), className),
+		...props
+	});
+};
+const DialogBackdrop = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: cn$1(slots.backdrop(), className),
+		...props
+	});
+};
+const DialogViewport = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: cn$1(slots.viewport(), className),
+		...props
+	});
+};
+const DialogPopup = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		className: cn$1(slots.popup(), className),
+		...props
+	});
+};
+const DialogTitle = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn$1(slots.title(), className),
+		...props
+	});
+};
+const DialogDescription = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn$1(slots.description(), className),
+		...props
+	});
+};
+const DialogClose = ({ className, ...props }) => {
+	const { slots } = useDialog();
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		className: cn$1(slots.close(), className),
+		...props,
+		children: /* @__PURE__ */ jsx(LucideX, {})
+	});
+};
+var dialog_default = Object.assign(Dialog$1, {
+	Backdrop: DialogBackdrop,
+	Close: DialogClose,
+	Description: DialogDescription,
+	Popup: DialogPopup,
+	Portal: DialogPortal,
+	Root: Dialog$1,
+	Title: DialogTitle,
+	Trigger: DialogTrigger,
+	Viewport: DialogViewport
+});
+
+//#endregion
+//#region src/components/drawer/drawer.context.ts
+const DrawerContext = createContext(null);
+
+//#endregion
+//#region src/components/drawer/drawer.variants.ts
+const drawerVariants = tv({
+	defaultVariants: { position: "left" },
+	slots: {
+		backdrop: "drawer__backdrop",
+		close: "drawer__close",
+		description: "drawer__description",
+		popup: "drawer__popup",
+		portal: "drawer__portal",
+		root: "drawer",
+		title: "drawer__title",
+		trigger: "drawer__trigger",
+		viewport: "drawer__viewport"
+	},
+	variants: { position: {
+		bottom: { popup: "drawer--bottom" },
+		left: { popup: "drawer--left" },
+		right: { popup: "drawer--right" },
+		top: { popup: "drawer--top" }
+	} }
+});
+
+//#endregion
+//#region src/components/drawer/use-drawer.ts
+const useDrawer = () => {
+	const context = useContext(DrawerContext);
+	if (!context) throw new Error("useDrawer must be used within a DrawerProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/drawer/drawer.tsx
+const Drawer = ({ position, ...props }) => {
+	return /* @__PURE__ */ jsx(DrawerContext, {
+		value: { slots: useMemo(() => drawerVariants({ position }), [position]) },
+		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
+	});
+};
+const DrawerTrigger = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		className: cn$1(slots.trigger(), className),
+		...props
+	});
+};
+const DrawerPortal = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		className: cn$1(slots.portal(), className),
+		...props
+	});
+};
+const DrawerBackdrop = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: cn$1(slots.backdrop(), className),
+		...props
+	});
+};
+const DrawerViewport = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: cn$1(slots.viewport(), className),
+		...props
+	});
+};
+const DrawerPopup = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		className: cn$1(slots.popup(), className),
+		...props
+	});
+};
+const DrawerTitle = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn$1(slots.title(), className),
+		...props
+	});
+};
+const DrawerDescription = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn$1(slots.description(), className),
+		...props
+	});
+};
+const DrawerClose = ({ className, children, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		className: cn$1(slots.close(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(LucideX, {})
+	});
+};
+var drawer_default = Object.assign(Drawer, {
+	Backdrop: DrawerBackdrop,
+	Close: DrawerClose,
+	Description: DrawerDescription,
+	Popup: DrawerPopup,
+	Portal: DrawerPortal,
+	Root: Drawer,
+	Title: DrawerTitle,
+	Trigger: DrawerTrigger,
+	Viewport: DrawerViewport
+});
+
+//#endregion
+//#region src/components/field/field.context.ts
+const FieldContext = createContext(null);
+
+//#endregion
+//#region src/components/field/field.variants.ts
+const fieldVariants = tv({ slots: {
+	control: "input field__control",
+	description: "field__description",
+	error: "field__error",
+	label: "label field__label",
+	root: "field"
+} });
+
+//#endregion
+//#region src/components/field/use-field.ts
+const useField = () => {
+	const context = useContext(FieldContext);
+	if (!context) throw new Error("useField must be used within a FieldProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/field/field.tsx
+const FieldRoot = ({ className, required, ...props }) => {
+	const slots = useMemo(() => fieldVariants({}), []);
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: {
+			required,
+			slots
+		},
+		children: /* @__PURE__ */ jsx(Field.Root, {
+			className: cn$1(className, slots.root()),
+			"data-required": required,
+			...props
+		})
+	});
+};
+const FieldLabel = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Label, {
+		className: cn$1(className, slots.label()),
+		...props
+	});
+};
+const FieldControl = ({ className, ...props }) => {
+	const { slots, required } = useField();
+	return /* @__PURE__ */ jsx(Field.Control, {
+		className: cn$1(className, slots.control()),
+		required,
+		...props
+	});
+};
+const FieldDescription = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Description, {
+		className: cn$1(className, slots.description()),
+		...props
+	});
+};
+const FieldError = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Error, {
+		className: cn$1(className, slots.error()),
+		...props
+	});
+};
+var field_default = Object.assign(FieldRoot, {
+	Control: FieldControl,
+	Description: FieldDescription,
+	Error: FieldError,
+	Label: FieldLabel,
+	Root: FieldRoot
+});
+
+//#endregion
+//#region src/components/fieldset/fieldset.context.ts
+const FieldsetContext = createContext(null);
+
+//#endregion
+//#region src/components/fieldset/fieldset.variants.ts
+const fieldsetVariants = tv({ slots: {
+	legend: "fieldset__legend",
+	root: "fieldset"
+} });
+
+//#endregion
+//#region src/components/fieldset/use-fieldset.ts
+const useFieldset = () => {
+	const context = useContext(FieldsetContext);
+	if (!context) throw new Error("useFieldset must be used within a FieldsetProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/fieldset/fieldset.tsx
+const Fieldset$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => fieldsetVariants(), []);
+	return /* @__PURE__ */ jsx(FieldsetContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Fieldset.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const FieldsetLegend = ({ className, ...props }) => {
+	const { slots } = useFieldset();
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		className: cn$1(slots.legend(), className),
+		...props
+	});
+};
+var fieldset_default = Object.assign(Fieldset$1, {
+	Legend: FieldsetLegend,
+	Root: Fieldset$1
+});
+
+//#endregion
+//#region src/components/form/form.variants.ts
+const formVariants = tv({ base: "form" });
+
+//#endregion
+//#region src/components/form/form.tsx
+const Form$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Form, {
+		className: cn$1(className, formVariants()),
+		...props
+	});
+};
+var form_default = Form$1;
+
+//#endregion
+//#region src/components/icon-button/icon-button.variants.ts
+const iconButtonVariants = tv({
+	base: "icon-button",
+	defaultVariants: { isIconOnly: true },
+	extend: buttonVariants
+});
+
+//#endregion
+//#region src/components/icon-button/icon-button.tsx
+const IconButton = ({ className, variant, size, isIconOnly, ...props }) => {
+	return /* @__PURE__ */ jsx(button_default, {
+		className: cn$1(className, iconButtonVariants({
+			isIconOnly,
+			size,
+			variant
+		})),
+		...props
+	});
+};
+var icon_button_default = IconButton;
+
+//#endregion
+//#region src/components/input/input.variants.ts
+const inputVariants = tv({ base: "input" });
+
+//#endregion
+//#region src/components/input/input.tsx
+const Input$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn$1(className, inputVariants()),
+		...props
+	});
+};
+var input_default = Input$1;
+
+//#endregion
+//#region src/components/label/label.variants.ts
+const labelVariants = tv({ base: "label" });
+
+//#endregion
+//#region src/components/label/label.tsx
+const Label = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("label", {
+		className: cn$1(className, labelVariants()),
+		...props
+	});
+};
+var label_default = Label;
+
+//#endregion
+//#region src/components/link/link.variants.ts
+const linkVariants = tv({
+	base: "link",
+	defaultVariants: { variant: "no-underline" },
+	variants: { variant: {
+		"no-underline": "link--no-underline",
+		underline: "link--underline"
+	} }
+});
+
+//#endregion
+//#region src/components/link/link.tsx
+const Link = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx("a", {
+		className: cn$1(className, linkVariants({ variant })),
+		...props
+	});
+};
+var link_default = Link;
+
+//#endregion
+//#region src/components/list/list.context.ts
+const ListContext = createContext(null);
+
+//#endregion
+//#region src/components/list/list.variants.ts
+const listVariants = tv({ slots: {
+	item: "list__item",
+	root: "list"
+} });
+
+//#endregion
+//#region src/components/list/use-list.ts
+const useList = () => {
+	const context = useContext(ListContext);
+	if (!context) throw new Error("useList must be used within a ListProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/list/list.tsx
+const List = ({ className, ...props }) => {
+	const slots = useMemo(() => listVariants(), []);
+	return /* @__PURE__ */ jsx(ListContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx("ul", {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const ListItem = ({ className, ...props }) => {
+	const { slots } = useList();
+	return /* @__PURE__ */ jsx("li", {
+		className: cn$1(className, slots.item()),
+		...props
+	});
+};
+var list_default = Object.assign(List, {
+	Item: ListItem,
+	Root: List
+});
+
+//#endregion
+//#region src/components/menu/menu.context.ts
+const MenuContext = createContext(null);
+
+//#endregion
+//#region src/components/menu/menu.variants.ts
+const menuVariants = tv({ slots: {
+	arrow: "menu__arrow",
+	backdrop: "menu__backdrop",
+	checkboxItem: "menu__checkbox-item",
+	group: "menu__group",
+	groupLabel: "menu__group-label",
+	item: "menu__item",
+	popup: "menu__popup",
+	portal: "menu__portal",
+	positioner: "menu__positioner",
+	radioGroup: "menu__radio-group",
+	radioItem: "menu__radio-item",
+	root: "menu",
+	separator: "menu__separator",
+	submenu: "menu__submenu",
+	submenuTrigger: "menu__submenu__trigger",
+	trigger: "menu__trigger"
+} });
+
+//#endregion
+//#region src/components/menu/use-menu.ts
+const useMenu = () => {
+	const context = useContext(MenuContext);
+	if (!context) throw new Error("useMenu must be used within a MenuProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/menu/menu.tsx
+const Menu$1 = ({ ...props }) => {
+	const slots = useMemo(() => menuVariants(), []);
+	return /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Menu.Root, { ...props })
+	});
+};
+const MenuTrigger = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		className: cn$1(slots.trigger(), className),
+		...props
+	});
+};
+const MenuPortal = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		className: cn$1(slots.portal(), className),
+		...props
+	});
+};
+const MenuBackdrop = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Backdrop, {
+		className: cn$1(slots.backdrop(), className),
+		...props
+	});
+};
+const MenuPositioner = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: cn$1(slots.positioner(), className),
+		...props
+	});
+};
+const MenuPopup = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		className: cn$1(slots.popup(), className),
+		...props
+	});
+};
+const MenuArrow = ({ className, children, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		className: cn$1(slots.arrow(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(LucideChevronUp, {})
+	});
+};
+const MenuItem = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		className: cn$1(slots.item(), className),
+		...props
+	});
+};
+const MenuSeparator = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		className: cn$1(slots.separator(), className),
+		...props
+	});
+};
+const MenuGroup = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		className: cn$1(slots.group(), className),
+		...props
+	});
+};
+const MenuGroupLabel = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: cn$1(slots.groupLabel(), className),
+		...props
+	});
+};
+const MenuRadioGroup = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		className: cn$1(slots.radioGroup(), className),
+		...props
+	});
+};
+const MenuRadioItem = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.RadioItem, {
+		className: cn$1(slots.radioItem(), className),
+		...props
+	});
+};
+const MenuCheckboxItem = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		className: cn$1(slots.checkboxItem(), className),
+		...props
+	});
+};
+const MenuSubmenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+};
+const MenuSubmenuTrigger = ({ className, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+		className: cn$1(slots.submenuTrigger(), className),
+		...props
+	});
+};
+var menu_default = Object.assign(Menu$1, {
+	Arrow: MenuArrow,
+	Backdrop: MenuBackdrop,
+	CheckboxItem: MenuCheckboxItem,
+	Group: MenuGroup,
+	GroupLabel: MenuGroupLabel,
+	Item: MenuItem,
+	Popup: MenuPopup,
+	Portal: MenuPortal,
+	Positioner: MenuPositioner,
+	RadioGroup: MenuRadioGroup,
+	RadioItem: MenuRadioItem,
+	Root: Menu$1,
+	Separator: MenuSeparator,
+	Submenu: MenuSubmenu,
+	SubmenuTrigger: MenuSubmenuTrigger,
+	Trigger: MenuTrigger
+});
+
+//#endregion
+//#region src/components/meter/meter.context.ts
+const MeterContext = createContext(void 0);
+
+//#endregion
+//#region src/components/meter/meter.variants.ts
+const meterVariants = tv({
+	slots: {
+		indicator: "meter__indicator",
+		label: "meter__label",
+		root: "meter",
+		track: "meter__track",
+		value: "meter__value"
+	},
+	variants: {
+		size: {
+			lg: { root: "meter--lg" },
+			md: { root: "meter--md" },
+			sm: { root: "meter--sm" }
+		},
+		variant: {
+			danger: { root: "meter--danger" },
+			primary: { root: "meter--primary" },
+			secondary: { root: "meter--secondary" },
+			success: { root: "meter--success" }
+		}
+	}
+});
+
+//#endregion
+//#region src/components/meter/use-meter.ts
+const useMeter = () => {
+	const context = useContext(MeterContext);
+	if (!context) throw new Error("useMeter must be used within a MeterProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/meter/meter.tsx
+const Meter$1 = ({ className, size, variant, ...props }) => {
+	const slots = useMemo(() => meterVariants({
+		size,
+		variant
+	}), [size, variant]);
+	return /* @__PURE__ */ jsx(MeterContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Meter.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const MeterLabel = ({ className, ...props }) => {
+	const { slots } = useMeter();
+	return /* @__PURE__ */ jsx(Meter.Label, {
+		className: cn$1(className, slots.label()),
+		...props
+	});
+};
+const MeterValue = ({ className, ...props }) => {
+	const { slots } = useMeter();
+	return /* @__PURE__ */ jsx(Meter.Value, {
+		className: cn$1(className, slots.value()),
+		...props
+	});
+};
+const MeterTrack = ({ className, ...props }) => {
+	const { slots } = useMeter();
+	return /* @__PURE__ */ jsx(Meter.Track, {
+		className: cn$1(className, slots.track()),
+		...props
+	});
+};
+const MeterIndicator = ({ className, ...props }) => {
+	const { slots } = useMeter();
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		className: cn$1(className, slots.indicator()),
+		...props
+	});
+};
+var meter_default = Object.assign(Meter$1, {
+	Indicator: MeterIndicator,
+	Label: MeterLabel,
+	Root: Meter$1,
+	Track: MeterTrack,
+	Value: MeterValue
+});
+
+//#endregion
+//#region src/components/separator/separator.variants.ts
+const separatorVariants = tv({
+	base: "separator",
+	defaultVariants: { orientation: "horizontal" },
+	variants: { orientation: {
+		horizontal: "separator--horizontal",
+		vertical: "separator--vertical"
+	} }
+});
+
+//#endregion
+//#region src/components/separator/separator.tsx
+const Separator$1 = ({ className, orientation, ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn$1(className, separatorVariants({ orientation })),
+		...props
+	});
+};
+var separator_default = Separator$1;
+
+//#endregion
+//#region src/components/navbar/navbar.context.ts
+const NavbarContext = createContext(null);
+
+//#endregion
+//#region src/components/navbar/navbar.variants.ts
+const navbarVariants = tv({ slots: {
+	container: "navbar__container",
+	content: "navbar__content",
+	list: "navbar__list",
+	listItem: "navbar__list-item",
+	menu: "navbar__menu",
+	menuItem: "navbar__menu-item",
+	root: "navbar",
+	toggle: "navbar__toggle"
+} });
+
+//#endregion
+//#region src/components/navbar/use-navbar.ts
+const useNavbar = () => {
+	const context = React.useContext(NavbarContext);
+	if (!context) throw new Error("useNavbar must be used within a NavbarProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/navbar/navbar.tsx
+const Navbar = ({ className, isOpen, onOpenChange, ...props }) => {
+	const slots = useMemo(() => navbarVariants(), []);
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = isOpen ?? internalOpen;
+	const handleOpenChange = useCallback((next) => {
+		if (isOpen === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [isOpen, onOpenChange]);
+	return /* @__PURE__ */ jsx(NavbarContext.Provider, {
+		value: {
+			isOpen: open,
+			onOpenChange: handleOpenChange,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("header", {
+			className: cn$1(slots.root(), className),
+			...props
+		})
+	});
+};
+const NavbarContainer = ({ className, ...props }) => {
+	const { slots } = useNavbar();
+	return /* @__PURE__ */ jsx("nav", {
+		className: cn$1(slots.container(), className),
+		...props
+	});
+};
+const NavbarContent = ({ className, ...props }) => {
+	const { slots } = useNavbar();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(slots.content(), className),
+		...props
+	});
+};
+const NavbarList = ({ className, ...props }) => {
+	const { slots } = useNavbar();
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn$1(slots.list(), className),
+		...props
+	});
+};
+const NavbarListItem = ({ className, ...props }) => {
+	const { slots } = useNavbar();
+	return /* @__PURE__ */ jsx(Slot, {
+		className: cn$1(slots.listItem(), className),
+		...props
+	});
+};
+const NavbarToggle = ({ className, ...props }) => {
+	const { slots, isOpen, onOpenChange } = useNavbar();
+	const Icon = isOpen ? LucideX : LucideMenu;
+	return /* @__PURE__ */ jsx("button", {
+		className: cn$1(className, slots.toggle()),
+		onClick: () => onOpenChange(!isOpen),
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
+	});
+};
+const NavbarMenu = ({ className, header, ...props }) => {
+	const { slots, isOpen, onOpenChange } = useNavbar();
+	return /* @__PURE__ */ jsx(drawer_default, {
+		onOpenChange,
+		open: isOpen,
+		children: /* @__PURE__ */ jsxs(drawer_default.Portal, { children: [/* @__PURE__ */ jsx(drawer_default.Backdrop, {}), /* @__PURE__ */ jsx(drawer_default.Viewport, { children: /* @__PURE__ */ jsxs(drawer_default.Popup, { children: [
+			header,
+			/* @__PURE__ */ jsx(drawer_default.Close, {}),
+			/* @__PURE__ */ jsx(separator_default, {}),
+			/* @__PURE__ */ jsx("ul", {
+				className: cn$1(slots.menu(), className),
+				...props
+			})
+		] }) })] })
+	});
+};
+const NavbarMenuItem = ({ className, ...props }) => {
+	const { slots } = useNavbar();
+	return /* @__PURE__ */ jsx(Slot, {
+		className: cn$1(slots.menuItem(), className),
+		...props
+	});
+};
+var navbar_default = Object.assign(Navbar, {
+	Container: NavbarContainer,
+	Content: NavbarContent,
+	List: NavbarList,
+	ListItem: NavbarListItem,
+	Menu: NavbarMenu,
+	MenuItem: NavbarMenuItem,
+	Root: Navbar,
+	Toggle: NavbarToggle
+});
+
+//#endregion
+//#region src/components/popover/popover.context.ts
+const PopoverContext = createContext(null);
+
+//#endregion
+//#region src/components/popover/popover.variants.ts
+const popoverVariants = tv({ slots: {
+	arrow: "popover__arrow",
+	backdrop: "popover__backdrop",
+	close: "popover__close",
+	content: "popover__content",
+	description: "popover__description",
+	popup: "popover__popup",
+	portal: "popover__portal",
+	positioner: "popover__positioner",
+	root: "popover",
+	title: "popover__title",
+	trigger: "popover__trigger",
+	viewport: "popover__viewport"
+} });
+
+//#endregion
+//#region src/components/popover/use-popover.ts
+const usePopover = () => {
+	const context = useContext(PopoverContext);
+	if (!context) throw new Error("usePopover must be used within a PopoverProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/popover/popover.tsx
+const Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverContext, {
+		value: { slots: useMemo(() => popoverVariants({}), []) },
+		children: /* @__PURE__ */ jsx(Popover.Root, { ...props })
+	});
+};
+const PopoverTrigger = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		className: cn$1(className, slots.trigger()),
+		...props
+	});
+};
+const PopoverPortal = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		className: cn$1(className, slots.portal()),
+		...props
+	});
+};
+const PopoverBackdrop = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Backdrop, {
+		className: cn$1(className, slots.backdrop()),
+		...props
+	});
+};
+const PopoverPositioner = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Positioner, {
+		className: cn$1(className, slots.positioner()),
+		...props
+	});
+};
+const PopoverPopup = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Popup, {
+		className: cn$1(className, slots.popup()),
+		...props
+	});
+};
+const PopoverArrow = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		className: cn$1(className, slots.arrow()),
+		...props
+	});
+};
+const PopoverViewport = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Viewport, {
+		className: cn$1(className, slots.viewport()),
+		...props
+	});
+};
+const PopoverTitle = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		className: cn$1(className, slots.title()),
+		...props
+	});
+};
+const PopoverDescription = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		className: cn$1(className, slots.description()),
+		...props
+	});
+};
+const PopoverClose = ({ className, children, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		className: cn$1(className, slots.close()),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(LucideX, {})
+	});
+};
+var popover_default = Object.assign(Popover$1, {
+	Arrow: PopoverArrow,
+	Backdrop: PopoverBackdrop,
+	Close: PopoverClose,
+	Description: PopoverDescription,
+	Popup: PopoverPopup,
+	Portal: PopoverPortal,
+	Positioner: PopoverPositioner,
+	Root: Popover$1,
+	Title: PopoverTitle,
+	Trigger: PopoverTrigger,
+	Viewport: PopoverViewport
+});
+
+//#endregion
+//#region src/components/progress/progress.context.ts
+const ProgressContext = createContext(null);
+
+//#endregion
+//#region src/components/progress/progress.variants.ts
+const progressVariants = tv({
+	defaultVariants: {
+		size: "md",
+		variant: "primary"
+	},
+	slots: {
+		indicator: "progress__indicator",
+		label: "progress__label",
+		root: "progress",
+		track: "progress__track",
+		value: "progress__value"
+	},
+	variants: {
+		size: {
+			lg: { root: "progress--lg" },
+			md: { root: "progress--md" },
+			sm: { root: "progress--sm" }
+		},
+		variant: {
+			danger: { root: "progress--danger" },
+			primary: { root: "progress--primary" },
+			secondary: { root: "progress--secondary" },
+			success: { root: "progress--success" }
+		}
+	}
+});
+
+//#endregion
+//#region src/components/progress/use-progress.ts
+const useProgress = () => {
+	const context = useContext(ProgressContext);
+	if (!context) throw new Error("useProgress must be used within a ProgressProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/progress/progress.tsx
+const Progress$1 = ({ className, variant, size, ...props }) => {
+	const slots = useMemo(() => progressVariants({
+		size,
+		variant
+	}), [variant, size]);
+	return /* @__PURE__ */ jsx(ProgressContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Progress.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const ProgressLabel = ({ className, ...props }) => {
+	const { slots } = useProgress();
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		className: cn$1(className, slots.label()),
+		...props
+	});
+};
+const ProgressValue = ({ className, ...props }) => {
+	const { slots } = useProgress();
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		className: cn$1(className, slots.value()),
+		...props
+	});
+};
+const ProgressTrack = ({ className, ...props }) => {
+	const { slots } = useProgress();
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		className: cn$1(className, slots.track()),
+		...props
+	});
+};
+const ProgressIndicator = ({ className, ...props }) => {
+	const { slots } = useProgress();
+	return /* @__PURE__ */ jsx(Progress.Indicator, {
+		className: cn$1(className, slots.indicator()),
+		...props
+	});
+};
+var progress_default = Object.assign(Progress$1, {
+	Indicator: ProgressIndicator,
+	Label: ProgressLabel,
+	Root: Progress$1,
+	Track: ProgressTrack,
+	Value: ProgressValue
+});
+
+//#endregion
+//#region src/components/radio/radio.context.ts
+const RadioContext = createContext(null);
+
+//#endregion
+//#region src/components/radio/radio.variants.ts
+const radioVariants = tv({ slots: {
+	indicator: "radio__indicator",
+	root: "radio"
+} });
+
+//#endregion
+//#region src/components/radio/use-radio.ts
+const useRadio = () => {
+	const context = useContext(RadioContext);
+	if (!context) throw new Error("useRadio must be used within a RadioProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/radio/radio.tsx
+const Radio$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => radioVariants({}), []);
+	return /* @__PURE__ */ jsx(RadioContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Radio.Root, {
+			className: cn$1(slots.root(), className),
+			...props
+		})
+	});
+};
+const RadioIndicator = ({ className, ...props }) => {
+	const { slots } = useRadio();
+	return /* @__PURE__ */ jsx(Radio.Indicator, {
+		className: cn$1(slots.indicator(), className),
+		...props
+	});
+};
+var radio_default = Object.assign(Radio$1, {
+	Indicator: RadioIndicator,
+	Root: Radio$1
+});
+
+//#endregion
+//#region src/components/radio-group/radio-group.variants.ts
+const radioGroupVariants = tv({ base: "radio-group" });
+
+//#endregion
+//#region src/components/radio-group/radio-group.tsx
+const RadioGroup$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		className: cn$1(className, useMemo(() => radioGroupVariants(), [])),
+		...props
+	});
+};
+var radio_group_default = RadioGroup$1;
+
+//#endregion
+//#region src/components/select/select.context.ts
+const SelectContext = createContext(null);
+
+//#endregion
+//#region src/components/select/select.variants.ts
+const selectVariants = tv({ slots: {
+	control: "select__control",
+	description: "select__description",
+	error: "select__error",
+	label: "select__label",
+	option: "select__option",
+	root: "select"
+} });
+
+//#endregion
+//#region src/components/select/use-select.ts
+const useSelect = () => {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("useSelect must be used within a SelectProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/select/select.tsx
+const Select = ({ className, ...props }) => {
+	const slots = useMemo(() => selectVariants(), []);
+	const generatedId = useId();
+	const inputId = props.id || generatedId;
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: {
+			id: inputId,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const SelectLabel = ({ className, ...props }) => {
+	const { slots, id } = useSelect();
+	return /* @__PURE__ */ jsx("label", {
+		className: cn$1(className, slots.label()),
+		htmlFor: id,
+		...props
+	});
+};
+const SelectControl = ({ className, ...props }) => {
+	const { slots, id } = useSelect();
+	return /* @__PURE__ */ jsx("select", {
+		className: cn$1(className, slots.control()),
+		id,
+		...props
+	});
+};
+const SelectOption = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ jsx("option", {
+		className: cn$1(className, slots.option()),
+		...props
+	});
+};
+const SelectDescription = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ jsx("p", {
+		className: cn$1(className, slots.description()),
+		...props
+	});
+};
+const SelectError = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ jsx("p", {
+		className: cn$1(className, slots.error()),
+		...props
+	});
+};
+var select_default = Object.assign(Select, {
+	Control: SelectControl,
+	Description: SelectDescription,
+	Error: SelectError,
+	Label: SelectLabel,
+	Option: SelectOption,
+	Root: Select
+});
+
+//#endregion
+//#region src/components/sidebar/sidebar.context.ts
+const SidebarContext = createContext(null);
+
+//#endregion
+//#region src/components/sidebar/sidebar.variants.ts
+const sidebarVariants = tv({ slots: {
+	content: "sidebar__content",
+	footer: "sidebar__footer",
+	header: "sidebar__header",
+	menu: "sidebar__menu",
+	menuItem: "sidebar__menu-item",
+	menuLabel: "sidebar__menu-label",
+	outlet: "sidebar__outlet",
+	panel: "sidebar__panel",
+	root: "sidebar",
+	trigger: "sidebar__trigger"
+} });
+
+//#endregion
+//#region src/components/sidebar/use-sidebar.ts
+const useSidebar = () => {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/sidebar/sidebar.tsx
+const Sidebar = ({ className, isOpen, onOpenChange, ...props }) => {
+	const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+	const isOpenState = isOpen !== void 0 ? isOpen : internalIsOpen;
+	const handleOpenChange = onOpenChange || setInternalIsOpen;
+	const slots = useMemo(() => sidebarVariants({ className }), [className]);
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: {
+			isOpen: isOpenState,
+			onOpenChange: handleOpenChange,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: slots.root(),
+			"data-open": isOpenState,
+			...props
+		})
+	});
+};
+const SidebarPanel = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("aside", {
+		className: cn$1(slots.panel(), className),
+		...props
+	});
+};
+const SidebarHeader = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("header", {
+		className: cn$1(slots.header(), className),
+		...props
+	});
+};
+const SidebarContent = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(slots.content(), className),
+		...props
+	});
+};
+const SidebarFooter = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("footer", {
+		className: cn$1(slots.footer(), className),
+		...props
+	});
+};
+const SidebarTrigger = ({ className, children, ...props }) => {
+	const { slots, isOpen, onOpenChange } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-expanded": isOpen,
+		className: cn$1(slots.trigger(), className),
+		onClick: () => onOpenChange(!isOpen),
+		...props,
+		children: children ?? (isOpen ? /* @__PURE__ */ jsx(LucidePanelLeftClose, {}) : /* @__PURE__ */ jsx(LucidePanelLeftOpen, {}))
+	});
+};
+const SidebarOutlet = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(slots.outlet(), className),
+		...props
+	});
+};
+const SidebarMenu = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("nav", {
+		className: cn$1(slots.menu(), className),
+		...props
+	});
+};
+const SidebarMenuItem = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx(Slot, {
+		className: cn$1(slots.menuItem(), className),
+		...props
+	});
+};
+const SidebarMenuLabel = ({ className, ...props }) => {
+	const { slots } = useSidebar();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(slots.menuLabel(), className),
+		...props
+	});
+};
+var sidebar_default = Object.assign(Sidebar, {
+	Content: SidebarContent,
+	Footer: SidebarFooter,
+	Header: SidebarHeader,
+	Menu: SidebarMenu,
+	MenuItem: SidebarMenuItem,
+	MenuLabel: SidebarMenuLabel,
+	Outlet: SidebarOutlet,
+	Panel: SidebarPanel,
+	Root: Sidebar,
+	Trigger: SidebarTrigger
+});
+
+//#endregion
+//#region src/components/slider/slider.context.ts
+const SliderContext = createContext(null);
+
+//#endregion
+//#region src/components/slider/slider.variants.ts
+const sliderVariants = tv({ slots: {
+	control: "slider__control",
+	indicator: "slider__indicator",
+	root: "slider",
+	thumb: "slider__thumb",
+	track: "slider__track",
+	value: "slider__value"
+} });
+
+//#endregion
+//#region src/components/slider/use-slider.tsx
+const useSlider = () => {
+	const context = useContext(SliderContext);
+	if (!context) throw new Error("useSlider must be used within a SliderProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/slider/slider.tsx
+const Slider$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => sliderVariants(), []);
+	return /* @__PURE__ */ jsx(SliderContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Slider.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const SliderValue = ({ className, ...props }) => {
+	const { slots } = useSlider();
+	return /* @__PURE__ */ jsx(Slider.Value, {
+		className: cn$1(className, slots.value()),
+		...props
+	});
+};
+const SliderControl = ({ className, ...props }) => {
+	const { slots } = useSlider();
+	return /* @__PURE__ */ jsx(Slider.Control, {
+		className: cn$1(className, slots.control()),
+		...props
+	});
+};
+const SliderTrack = ({ className, ...props }) => {
+	const { slots } = useSlider();
+	return /* @__PURE__ */ jsx(Slider.Track, {
+		className: cn$1(className, slots.track()),
+		...props
+	});
+};
+const SliderIndicator = ({ className, ...props }) => {
+	const { slots } = useSlider();
+	return /* @__PURE__ */ jsx(Slider.Indicator, {
+		className: cn$1(className, slots.indicator()),
+		...props
+	});
+};
+const SliderThumb = ({ className, ...props }) => {
+	const { slots } = useSlider();
+	return /* @__PURE__ */ jsx(Slider.Thumb, {
+		className: cn$1(className, slots.thumb()),
+		...props
+	});
+};
+var slider_default = Object.assign(Slider$1, {
+	Control: SliderControl,
+	Indicator: SliderIndicator,
+	Root: Slider$1,
+	Thumb: SliderThumb,
+	Track: SliderTrack,
+	Value: SliderValue
+});
+
+//#endregion
+//#region src/components/switch/switch.context.ts
+const SwitchContext = createContext(null);
+
+//#endregion
+//#region src/components/switch/switch.variants.ts
+const switchVariants = tv({
+	defaultVariants: { size: "md" },
+	slots: {
+		root: "switch",
+		thumb: "switch__thumb"
+	},
+	variants: { size: {
+		lg: { root: "switch--lg" },
+		md: { root: "switch--md" },
+		sm: { root: "switch--sm" }
+	} }
+});
+
+//#endregion
+//#region src/components/switch/use-switch.ts
+const useSwitch = () => {
+	const context = useContext(SwitchContext);
+	if (!context) throw new Error("useSwitch must be used within a SwitchProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/switch/switch.tsx
+const Switch$1 = ({ className, size, ...props }) => {
+	const slots = useMemo(() => switchVariants({ size }), [size]);
+	return /* @__PURE__ */ jsx(SwitchContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const SwitchThumb = ({ className, ...props }) => {
+	const { slots } = useSwitch();
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		className: cn$1(className, slots.thumb()),
+		...props
+	});
+};
+var switch_default = Object.assign(Switch$1, {
+	Root: Switch$1,
+	Thumb: SwitchThumb
+});
+
+//#endregion
+//#region src/components/table/table.context.ts
+const TableContext = createContext(null);
+
+//#endregion
+//#region src/components/table/table.variants.ts
+const tableVariants = tv({ slots: {
+	root: "table",
+	tbody: "table__tbody",
+	td: "table__td",
+	tfoot: "table__tfoot",
+	th: "table__th",
+	thead: "table__thead",
+	tr: "table__tr"
+} });
+
+//#endregion
+//#region src/components/table/use-table.ts
+const useTable = () => {
+	const context = useContext(TableContext);
+	if (!context) throw new Error("useTable must be used within a TableProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/table/table.tsx
+const Table = ({ className, ...props }) => {
+	const slots = useMemo(() => tableVariants(), []);
+	return /* @__PURE__ */ jsx(TableContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx("table", {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const TableHead = ({ className, ...props }) => {
+	const { slots } = useTable();
+	return /* @__PURE__ */ jsx("thead", {
+		className: cn$1(className, slots.thead()),
+		...props
+	});
+};
+const TableRow = ({ className, ...props }) => {
+	const { slots } = useTable();
+	return /* @__PURE__ */ jsx("tr", {
+		className: cn$1(className, slots.tr()),
+		...props
+	});
+};
+const TableHeaderCell = ({ className, ...props }) => {
+	const { slots } = useTable();
+	return /* @__PURE__ */ jsx("th", {
+		className: cn$1(className, slots.th()),
+		...props
+	});
+};
+const TableBody = ({ className, ...props }) => {
+	const { slots } = useTable();
+	return /* @__PURE__ */ jsx("tbody", {
+		className: cn$1(className, slots.tbody()),
+		...props
+	});
+};
+const TableDataCell = ({ className, ...props }) => {
+	const { slots } = useTable();
+	return /* @__PURE__ */ jsx("td", {
+		className: cn$1(className, slots.td()),
+		...props
+	});
+};
+const TableFooter = ({ className, ...props }) => {
+	const { slots } = useTable();
+	return /* @__PURE__ */ jsx("tfoot", {
+		className: cn$1(className, slots.tfoot()),
+		...props
+	});
+};
+var table_default = Object.assign(Table, {
+	Body: TableBody,
+	DataCell: TableDataCell,
+	Footer: TableFooter,
+	Head: TableHead,
+	HeaderCell: TableHeaderCell,
+	Root: Table,
+	Row: TableRow
+});
+
+//#endregion
+//#region src/components/tabs/tabs.context.ts
+const TabsContext = createContext(null);
+
+//#endregion
+//#region src/components/tabs/tabs.variants.ts
+const tabsVariants = tv({ slots: {
+	indicator: "tabs__indicator",
+	list: "tabs__list",
+	panel: "tabs__panel",
+	root: "tabs",
+	tab: "tabs__tab"
+} });
+
+//#endregion
+//#region src/components/tabs/use-tabs.ts
+const useTabs = () => {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error("useTabs must be used within a TabsProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/tabs/tabs.tsx
+const Tabs$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => tabsVariants(), []);
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const TabsList = ({ className, ...props }) => {
+	const { slots } = useTabs();
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		className: cn$1(slots.list(), className),
+		...props
+	});
+};
+const TabsTab = ({ className, ...props }) => {
+	const { slots } = useTabs();
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		className: cn$1(slots.tab(), className),
+		...props
+	});
+};
+const TabsIndicator = ({ className, ...props }) => {
+	const { slots } = useTabs();
+	return /* @__PURE__ */ jsx(Tabs.Indicator, {
+		className: cn$1(slots.indicator(), className),
+		...props
+	});
+};
+const TabsPanel = ({ className, ...props }) => {
+	const { slots } = useTabs();
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		className: cn$1(slots.panel(), className),
+		...props
+	});
+};
+var tabs_default = Object.assign(Tabs$1, {
+	Indicator: TabsIndicator,
+	List: TabsList,
+	Panel: TabsPanel,
+	Root: Tabs$1,
+	Tab: TabsTab
+});
+
+//#endregion
+//#region src/components/toggle-button/toggle-button.variants.ts
+const toggleButtonVariants = tv({
+	base: "toggle-button",
+	extend: buttonVariants
+});
+
+//#endregion
+//#region src/components/toggle-button/toggle-button.tsx
+const ToggleButton = ({ className, variant, size, ...props }) => {
+	return /* @__PURE__ */ jsx(Toggle, {
+		className: cn$1(className, toggleButtonVariants({
+			size,
+			variant
+		})),
+		...props
+	});
+};
+var toggle_button_default = ToggleButton;
+
+//#endregion
+export { accordion_default as Accordion, alert_default as Alert, alert_dialog_default as AlertDialog, avatar_default as Avatar, button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, checkbox_group_default as CheckboxGroup, chip_default as Chip, container_default as Container, dialog_default as Dialog, drawer_default as Drawer, field_default as Field, fieldset_default as Fieldset, form_default as Form, icon_button_default as IconButton, input_default as Input, label_default as Label, link_default as Link, list_default as List, menu_default as Menu, meter_default as Meter, navbar_default as Navbar, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, separator_default as Separator, sidebar_default as Sidebar, slider_default as Slider, switch_default as Switch, table_default as Table, tabs_default as Tabs, toggle_button_default as ToggleButton, accordionVariants, alertDialogVariants, alertVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, cn, containerVariants, dialogVariants, drawerVariants, fieldVariants, fieldsetVariants, formVariants, iconButtonVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, popoverVariants, progressVariants, radioGroupVariants, radioVariants, selectVariants, separatorVariants, sidebarVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, toggleButtonVariants };
+//# sourceMappingURL=index.mjs.map