@fea-ui/react 0.1.0-alpha.1 → 0.1.0-alpha.10

package/dist/index.mjs

@@ -1,8 +1,9 @@
 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";
+import { Accordion, AlertDialog, Avatar, Dialog, Fieldset, Menu, Meter, Progress, Radio, RadioGroup, Separator, Slider, Switch, Tabs, Toggle } from "@base-ui/react";
+import { LucideAlertTriangle, 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 { Button, CheckboxGroup, DialogTrigger, FieldError, Form, Input, Label, Popover, Text, TextArea, TextField } from "react-aria-components";
 
 //#region src/components/accordion/accordion.context.ts
 const AccordionContext = createContext(null);
@@ -62,7 +63,7 @@ const AccordionTrigger = ({ className, ...props }) => {
 };
 const AccordionTriggerIcon = ({ className, ...props }) => {
 	const { slots } = useAccordion();
-	return /* @__PURE__ */ jsx(LucidePlus, {
+	return /* @__PURE__ */ jsx(LucideChevronDown, {
 		className: cn$1(className, slots.triggerIcon()),
 		...props
 	});
@@ -81,14 +82,214 @@ const AccordionContent = ({ className, ...props }) => {
 		...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;
+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
@@ -144,10 +345,11 @@ const AvatarFallback = ({ className, ...props }) => {
 		...props
 	});
 };
-Avatar$1.Fallback = AvatarFallback;
-Avatar$1.Image = AvatarImage;
-Avatar$1.Root = Avatar$1;
-var avatar_default = Avatar$1;
+var avatar_default = Object.assign(Avatar$1, {
+	Fallback: AvatarFallback,
+	Image: AvatarImage,
+	Root: Avatar$1
+});
 
 //#endregion
 //#region src/components/button/button.variants.ts
@@ -282,58 +484,14 @@ const CardDescription = ({ className, ...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;
+var card_default = Object.assign(Card, {
+	Body: CardBody,
+	Description: CardDescription,
+	Footer: CardFooter,
+	Header: CardHeader,
+	Root: Card,
+	Title: CardTitle
+});
 
 //#endregion
 //#region src/components/checkbox-group/checkbox-group.variants.ts
@@ -400,6 +558,22 @@ const Container = ({ className, ...props }) => {
 };
 var container_default = Container;
 
+//#endregion
+//#region src/components/description/description.variants.ts
+const descriptionVariants = tv({ base: "description" });
+
+//#endregion
+//#region src/components/description/description.tsx
+const Description = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		className: cn$1(className, descriptionVariants()),
+		"data-slot": "description",
+		slot: "description",
+		...props
+	});
+};
+var description_default = Description;
+
 //#endregion
 //#region src/components/dialog/dialog.context.ts
 const DialogContext = createContext(null);
@@ -435,7 +609,7 @@ const Dialog$1 = ({ ...props }) => {
 		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
 	});
 };
-const DialogTrigger = ({ className, ...props }) => {
+const DialogTrigger$1 = ({ className, ...props }) => {
 	const { slots } = useDialog();
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		className: cn$1(slots.trigger(), className),
@@ -492,93 +666,188 @@ const DialogClose = ({ 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;
+var dialog_default = Object.assign(Dialog$1, {
+	Backdrop: DialogBackdrop,
+	Close: DialogClose,
+	Description: DialogDescription,
+	Popup: DialogPopup,
+	Portal: DialogPortal,
+	Root: Dialog$1,
+	Title: DialogTitle,
+	Trigger: DialogTrigger$1,
+	Viewport: DialogViewport
+});
 
 //#endregion
-//#region src/components/field/field.context.ts
-const FieldContext = createContext(null);
+//#region src/components/drawer/drawer.context.ts
+const DrawerContext = createContext(null);
 
 //#endregion
-//#region src/components/field/field.variants.ts
-const fieldVariants = tv({
+//#region src/components/drawer/drawer.variants.ts
+const drawerVariants = tv({
+	defaultVariants: { position: "left" },
 	slots: {
-		control: "input",
-		description: "field__description",
-		error: "field__error",
-		label: "label",
-		root: "field"
+		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: { size: {
-		lg: { control: "input--lg" },
-		md: { control: "input--md" },
-		sm: { control: "input--sm" }
+	variants: { position: {
+		bottom: { popup: "drawer--bottom" },
+		left: { popup: "drawer--left" },
+		right: { popup: "drawer--right" },
+		top: { popup: "drawer--top" }
 	} }
 });
 
 //#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;
+//#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/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
-		})
+//#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 FieldLabel = ({ className, ...props }) => {
-	const { slots } = useField();
-	return /* @__PURE__ */ jsx(Field.Label, {
-		className: cn$1(className, slots.label()),
+const DrawerTrigger = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		className: cn$1(slots.trigger(), className),
 		...props
 	});
 };
-const FieldDescription = ({ className, ...props }) => {
-	const { slots } = useField();
-	return /* @__PURE__ */ jsx(Field.Description, {
-		className: cn$1(className, slots.description()),
+const DrawerPortal = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		className: cn$1(slots.portal(), className),
 		...props
 	});
 };
-const FieldControl = ({ className, ...props }) => {
-	const { slots } = useField();
-	return /* @__PURE__ */ jsx(Field.Control, {
-		className: cn$1(className, slots.control()),
+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 FieldError = ({ className, ...props }) => {
-	const { slots } = useField();
-	return /* @__PURE__ */ jsx(Field.Error, {
-		className: cn$1(slots.error(), className),
+const DrawerDescription = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn$1(slots.description(), 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;
+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-error/field-error.variants.ts
+const fieldErrorVariants = tv({ base: "field-error" });
+
+//#endregion
+//#region src/components/field-error/field-error.tsx
+const FieldError$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(FieldError, {
+		className: cn$1(className, fieldErrorVariants()),
+		"data-slot": "field-error",
+		"data-visible": true,
+		...props
+	});
+};
+var field_error_default = FieldError$1;
+
+//#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
@@ -586,30 +855,45 @@ const formVariants = tv({ base: "form" });
 
 //#endregion
 //#region src/components/form/form.tsx
-const Form = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx("form", {
+const Form$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Form, {
 		className: cn$1(className, formVariants()),
 		...props
 	});
 };
-var form_default = Form;
+var form_default = Form$1;
 
 //#endregion
-//#region src/components/input/input.variants.ts
-const inputVariants = tv({
-	base: "input",
-	variants: { inputSize: {
-		lg: "input--lg",
-		md: "input--md",
-		sm: "input--sm"
-	} }
+//#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, inputSize, ...props }) => {
+const Input$1 = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Input, {
-		className: cn$1(className, inputVariants({ inputSize })),
+		className: cn$1(className, inputVariants()),
 		...props
 	});
 };
@@ -621,13 +905,13 @@ const labelVariants = tv({ base: "label" });
 
 //#endregion
 //#region src/components/label/label.tsx
-const Label = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx("label", {
+const Label$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Label, {
 		className: cn$1(className, labelVariants()),
 		...props
 	});
 };
-var label_default = Label;
+var label_default = Label$1;
 
 //#endregion
 //#region src/components/link/link.variants.ts
@@ -688,9 +972,10 @@ const ListItem = ({ className, ...props }) => {
 		...props
 	});
 };
-List.Root = List;
-List.Item = ListItem;
-var list_default = List;
+var list_default = Object.assign(List, {
+	Item: ListItem,
+	Root: List
+});
 
 //#endregion
 //#region src/components/menu/menu.context.ts
@@ -769,11 +1054,12 @@ const MenuPopup = ({ className, ...props }) => {
 		...props
 	});
 };
-const MenuArrow = ({ className, ...props }) => {
+const MenuArrow = ({ className, children, ...props }) => {
 	const { slots } = useMenu();
 	return /* @__PURE__ */ jsx(Menu.Arrow, {
 		className: cn$1(slots.arrow(), className),
-		...props
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(LucideChevronUp, {})
 	});
 };
 const MenuItem = ({ className, ...props }) => {
@@ -835,23 +1121,24 @@ const MenuSubmenuTrigger = ({ className, ...props }) => {
 		...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;
+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
@@ -933,12 +1220,34 @@ const MeterIndicator = ({ className, ...props }) => {
 		...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;
+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
@@ -1025,12 +1334,20 @@ const NavbarToggle = ({ className, ...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 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 }) => {
@@ -1040,36 +1357,450 @@ const NavbarMenuItem = ({ className, ...props }) => {
 		...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;
+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/separator/separator.variants.ts
-const separatorVariants = tv({
-	base: "separator",
-	defaultVariants: { orientation: "horizontal" },
-	variants: { orientation: {
-		horizontal: "separator--horizontal",
-		vertical: "separator--vertical"
-	} }
+//#region src/components/overlay-trigger/overlay-trigger.tsx
+const OverlayTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+};
+var overlay_trigger_default = OverlayTrigger;
+
+//#endregion
+//#region src/components/popover/popover.variants.ts
+const popoverVariants = tv({ base: "popover" });
+
+//#endregion
+//#region src/components/popover/popover.tsx
+const Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover, {
+		className: cn$1(popoverVariants()),
+		...props
+	});
+};
+var popover_default = Popover$1;
+
+//#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/separator/separator.tsx
-const Separator$1 = ({ className, orientation, ...props }) => {
-	return /* @__PURE__ */ jsx(Separator, {
-		className: cn$1(className, separatorVariants({ orientation })),
+//#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
 	});
 };
-var separator_default = Separator$1;
+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",
+	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
+	});
+};
+var sidebar_default = Object.assign(Sidebar, {
+	Content: SidebarContent,
+	Footer: SidebarFooter,
+	Header: SidebarHeader,
+	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
@@ -1117,9 +1848,98 @@ const SwitchThumb = ({ className, ...props }) => {
 		...props
 	});
 };
-Switch$1.Thumb = SwitchThumb;
-Switch$1.Root = Switch$1;
-var switch_default = Switch$1;
+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
@@ -1183,12 +2003,13 @@ const TabsPanel = ({ className, ...props }) => {
 		...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;
+var tabs_default = Object.assign(Tabs$1, {
+	Indicator: TabsIndicator,
+	List: TabsList,
+	Panel: TabsPanel,
+	Root: Tabs$1,
+	Tab: TabsTab
+});
 
 //#endregion
 //#region src/components/text/text.variants.ts
@@ -1196,26 +2017,37 @@ const textVariants = tv({ base: "text" });
 
 //#endregion
 //#region src/components/text/text.tsx
-const Text = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+const Text$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Text, {
 		className: cn$1(textVariants(), className),
 		"data-slot": "text",
 		...props
 	});
 };
-var text_default = Text;
+var text_default = Text$1;
+
+//#endregion
+//#region src/components/text-field/text-field.variants.ts
+const textFieldVariants = tv({ base: "text-field" });
+
+//#endregion
+//#region src/components/text-field/text-field.tsx
+const TextField$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(TextField, {
+		className: cn$1(className, textFieldVariants()),
+		...props
+	});
+};
+var text_field_default = TextField$1;
 
 //#endregion
 //#region src/components/textarea/textarea.variants.ts
-const textareaVariants = tv({
-	base: "textarea",
-	extend: inputVariants
-});
+const textareaVariants = tv({ base: "textarea" });
 
 //#endregion
 //#region src/components/textarea/textarea.tsx
 const Textarea = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx("textarea", {
+	return /* @__PURE__ */ jsx(TextArea, {
 		className: cn$1(className, textareaVariants()),
 		...props
 	});
@@ -1243,5 +2075,5 @@ const ToggleButton = ({ className, variant, size, ...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 };
+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_group_default as CheckboxGroup, chip_default as Chip, container_default as Container, description_default as Description, dialog_default as Dialog, drawer_default as Drawer, field_error_default as FieldError, 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, overlay_trigger_default as OverlayTrigger, 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, text_default as Text, text_field_default as TextField, textarea_default as Textarea, toggle_button_default as ToggleButton, accordionVariants, alertDialogVariants, alertVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, chipVariants, cn, containerVariants, descriptionVariants, dialogVariants, drawerVariants, fieldErrorVariants, fieldsetVariants, formVariants, iconButtonVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, popoverVariants, progressVariants, radioGroupVariants, radioVariants, selectVariants, separatorVariants, sidebarVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textVariants, textareaVariants, toggleButtonVariants };
 //# sourceMappingURL=index.mjs.map