@fea-ui/react 0.1.0-alpha.0

package/dist/index.mjs

@@ -0,0 +1,1247 @@
+import { cn, cn as cn$1, tv } from "tailwind-variants";
+import { Accordion, Avatar, Button, Checkbox, CheckboxGroup, Dialog, Field, Input, Menu, Meter, Separator, Switch, Tabs, Toggle } from "@base-ui/react";
+import { LucideCheck, LucideMenu, LucidePlus, LucideX } from "lucide-react";
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#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(LucidePlus, {
+		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
+	});
+};
+Accordion$1.Content = AccordionContent;
+Accordion$1.Header = AccordionHeader;
+Accordion$1.Item = AccordionItem;
+Accordion$1.Panel = AccordionPanel;
+Accordion$1.Root = Accordion$1;
+Accordion$1.Trigger = AccordionTrigger;
+Accordion$1.TriggerIcon = AccordionTriggerIcon;
+var accordion_default = Accordion$1;
+
+//#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
+	});
+};
+Avatar$1.Fallback = AvatarFallback;
+Avatar$1.Image = AvatarImage;
+Avatar$1.Root = Avatar$1;
+var avatar_default = 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 */
+Card.Body = CardBody;
+Card.Description = CardDescription;
+Card.Footer = CardFooter;
+Card.Header = CardHeader;
+Card.Root = Card;
+Card.Title = CardTitle;
+var card_default = Card;
+
+//#endregion
+//#region src/components/checkbox/checkbox.context.ts
+const CheckboxContext = createContext(null);
+
+//#endregion
+//#region src/components/checkbox/checkbox.variants.ts
+const checkboxVariants = tv({ slots: {
+	checkboxIcon: "checkbox__icon",
+	indicator: "checkbox__indicator",
+	label: "checkbox__label",
+	root: "checkbox"
+} });
+
+//#endregion
+//#region src/components/checkbox/use-checkbox.ts
+const useCheckbox = () => {
+	const ctx = useContext(CheckboxContext);
+	if (!ctx) throw new Error("CheckboxContext must be used with in the Checkbox component.");
+	return ctx;
+};
+
+//#endregion
+//#region src/components/checkbox/checkbox.tsx
+const Checkbox$1 = ({ className, ...props }) => {
+	const slots = useMemo(() => checkboxVariants(), []);
+	return /* @__PURE__ */ jsx(CheckboxContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const CheckboxIndicator = ({ className, ...props }) => {
+	const { slots } = useCheckbox();
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		className: cn$1(className, slots.indicator()),
+		...props,
+		children: /* @__PURE__ */ jsx(LucideCheck, { className: slots.checkboxIcon() })
+	});
+};
+Checkbox$1.Indicator = CheckboxIndicator;
+Checkbox$1.Root = Checkbox$1;
+var checkbox_default = 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, {})
+	});
+};
+Dialog$1.Backdrop = DialogBackdrop;
+Dialog$1.Close = DialogClose;
+Dialog$1.Description = DialogDescription;
+Dialog$1.Popup = DialogPopup;
+Dialog$1.Portal = DialogPortal;
+Dialog$1.Root = Dialog$1;
+Dialog$1.Title = DialogTitle;
+Dialog$1.Trigger = DialogTrigger;
+Dialog$1.Viewport = DialogViewport;
+var dialog_default = Dialog$1;
+
+//#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",
+		description: "field__description",
+		error: "field__error",
+		label: "label",
+		root: "field"
+	},
+	variants: { size: {
+		lg: { control: "input--lg" },
+		md: { control: "input--md" },
+		sm: { control: "input--sm" }
+	} }
+});
+
+//#endregion
+//#region src/components/field/use-field.ts
+const useField = () => {
+	const ctx = useContext(FieldContext);
+	if (!ctx) throw new Error("FieldContext must be used with in the Field component.");
+	return ctx;
+};
+
+//#endregion
+//#region src/components/field/field.tsx
+const Field$1 = ({ className, size, ...props }) => {
+	const slots = useMemo(() => fieldVariants({ size }), [size]);
+	console.log(slots.root());
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: { slots },
+		children: /* @__PURE__ */ jsx(Field.Root, {
+			className: cn$1(className, slots.root()),
+			...props
+		})
+	});
+};
+const FieldLabel = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Label, {
+		className: cn$1(className, slots.label()),
+		...props
+	});
+};
+const FieldDescription = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Description, {
+		className: cn$1(className, slots.description()),
+		...props
+	});
+};
+const FieldControl = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Control, {
+		className: cn$1(className, slots.control()),
+		...props
+	});
+};
+const FieldError = ({ className, ...props }) => {
+	const { slots } = useField();
+	return /* @__PURE__ */ jsx(Field.Error, {
+		className: cn$1(slots.error(), className),
+		...props
+	});
+};
+Field$1.Control = FieldControl;
+Field$1.Description = FieldDescription;
+Field$1.Error = FieldError;
+Field$1.Label = FieldLabel;
+Field$1.Root = Field$1;
+var field_default = Field$1;
+
+//#endregion
+//#region src/components/form/form.variants.ts
+const formVariants = tv({ base: "form" });
+
+//#endregion
+//#region src/components/form/form.tsx
+const Form = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("form", {
+		className: cn$1(className, formVariants()),
+		...props
+	});
+};
+var form_default = Form;
+
+//#endregion
+//#region src/components/input/input.variants.ts
+const inputVariants = tv({
+	base: "input",
+	variants: { inputSize: {
+		lg: "input--lg",
+		md: "input--md",
+		sm: "input--sm"
+	} }
+});
+
+//#endregion
+//#region src/components/input/input.tsx
+const Input$1 = ({ className, inputSize, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn$1(className, inputVariants({ inputSize })),
+		...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
+	});
+};
+List.Root = List;
+List.Item = ListItem;
+var list_default = 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, ...props }) => {
+	const { slots } = useMenu();
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		className: cn$1(slots.arrow(), className),
+		...props
+	});
+};
+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
+	});
+};
+Menu$1.Arrow = MenuArrow;
+Menu$1.Backdrop = MenuBackdrop;
+Menu$1.CheckboxItem = MenuCheckboxItem;
+Menu$1.Group = MenuGroup;
+Menu$1.GroupLabel = MenuGroupLabel;
+Menu$1.Item = MenuItem;
+Menu$1.Popup = MenuPopup;
+Menu$1.Portal = MenuPortal;
+Menu$1.Positioner = MenuPositioner;
+Menu$1.RadioGroup = MenuRadioGroup;
+Menu$1.RadioItem = MenuRadioItem;
+Menu$1.Root = Menu$1;
+Menu$1.Separator = MenuSeparator;
+Menu$1.Submenu = MenuSubmenu;
+Menu$1.SubmenuTrigger = MenuSubmenuTrigger;
+Menu$1.Trigger = MenuTrigger;
+var menu_default = Menu$1;
+
+//#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
+	});
+};
+Meter$1.Indicator = MeterIndicator;
+Meter$1.Label = MeterLabel;
+Meter$1.Root = Meter$1;
+Meter$1.Track = MeterTrack;
+Meter$1.Value = MeterValue;
+var meter_default = Meter$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("li", {
+		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, ...props }) => {
+	const { slots, isOpen } = useNavbar();
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn$1(slots.menu(), className),
+		"data-expanded": isOpen ? "true" : "false",
+		...props
+	});
+};
+const NavbarMenuItem = ({ className, ...props }) => {
+	const { slots } = useNavbar();
+	return /* @__PURE__ */ jsx("li", {
+		className: cn$1(slots.menuItem(), className),
+		...props
+	});
+};
+Navbar.Root = Navbar;
+Navbar.Container = NavbarContainer;
+Navbar.Content = NavbarContent;
+Navbar.List = NavbarList;
+Navbar.ListItem = NavbarListItem;
+Navbar.Toggle = NavbarToggle;
+Navbar.Menu = NavbarMenu;
+Navbar.MenuItem = NavbarMenuItem;
+var navbar_default = Navbar;
+
+//#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/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
+	});
+};
+Switch$1.Thumb = SwitchThumb;
+Switch$1.Root = Switch$1;
+var switch_default = Switch$1;
+
+//#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
+	});
+};
+Tabs$1.List = TabsList;
+Tabs$1.Tab = TabsTab;
+Tabs$1.Indicator = TabsIndicator;
+Tabs$1.Panel = TabsPanel;
+Tabs$1.Root = Tabs$1;
+var tabs_default = Tabs$1;
+
+//#endregion
+//#region src/components/text/text.variants.ts
+const textVariants = tv({ base: "text" });
+
+//#endregion
+//#region src/components/text/text.tsx
+const Text = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1(textVariants(), className),
+		"data-slot": "text",
+		...props
+	});
+};
+var text_default = Text;
+
+//#endregion
+//#region src/components/textarea/textarea.variants.ts
+const textareaVariants = tv({
+	base: "textarea",
+	extend: inputVariants
+});
+
+//#endregion
+//#region src/components/textarea/textarea.tsx
+const Textarea = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cn$1(className, textareaVariants()),
+		...props
+	});
+};
+var textarea_default = Textarea;
+
+//#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, 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, field_default as Field, form_default as Form, 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, separator_default as Separator, switch_default as Switch, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, toggle_button_default as ToggleButton, accordionVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, cn, containerVariants, dialogVariants, fieldVariants, formVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, separatorVariants, switchVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
+//# sourceMappingURL=index.mjs.map