@fea-ui/react 0.1.0-alpha.8 → 0.1.0-alpha.9

package/dist/index.mjs

@@ -1,8 +1,9 @@
 import { cn, cn as cn$1, tv } from "tailwind-variants";
-import { Accordion, AlertDialog, Avatar, Button, Checkbox, CheckboxGroup, Dialog, Field, Fieldset, Input, Menu, Meter, Popover, Progress, Radio, RadioGroup, Separator, Slider, Switch, Tabs, Toggle } from "@base-ui/react";
-import { LucideCheck, LucideChevronDown, LucideMenu, LucideX } from "lucide-react";
-import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+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, 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);
@@ -81,14 +82,111 @@ 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
@@ -181,16 +279,17 @@ const AlertDialogClose = ({ className, children, ...props }) => {
 		children: children ?? /* @__PURE__ */ jsx(LucideX, {})
 	});
 };
-AlertDialog$1.Root = AlertDialog$1;
-AlertDialog$1.Trigger = AlertDialogTrigger;
-AlertDialog$1.Portal = AlertDialogPortal;
-AlertDialog$1.Backdrop = AlertDialogBackdrop;
-AlertDialog$1.Viewport = AlertDialogViewport;
-AlertDialog$1.Popup = AlertDialogPopup;
-AlertDialog$1.Title = AlertDialogTitle;
-AlertDialog$1.Description = AlertDialogDescription;
-AlertDialog$1.Close = AlertDialogClose;
-var alert_dialog_default = AlertDialog$1;
+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
@@ -246,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
@@ -384,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
@@ -502,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);
@@ -537,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),
@@ -594,16 +666,17 @@ 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/drawer/drawer.context.ts
@@ -705,93 +778,33 @@ const DrawerClose = ({ className, children, ...props }) => {
 		children: children ?? /* @__PURE__ */ jsx(LucideX, {})
 	});
 };
-Drawer.Root = Drawer;
-Drawer.Trigger = DrawerTrigger;
-Drawer.Portal = DrawerPortal;
-Drawer.Backdrop = DrawerBackdrop;
-Drawer.Viewport = DrawerViewport;
-Drawer.Popup = DrawerPopup;
-Drawer.Title = DrawerTitle;
-Drawer.Description = DrawerDescription;
-Drawer.Close = DrawerClose;
-var drawer_default = Drawer;
-
-//#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" }
-	} }
+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/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/field-error/field-error.variants.ts
+const fieldErrorVariants = tv({ base: "field-error" });
 
 //#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()),
+//#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
 	});
 };
-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;
+var field_error_default = FieldError$1;
 
 //#endregion
 //#region src/components/fieldset/fieldset.context.ts
@@ -831,9 +844,10 @@ const FieldsetLegend = ({ className, ...props }) => {
 		...props
 	});
 };
-Fieldset$1.Root = Fieldset$1;
-Fieldset$1.Legend = FieldsetLegend;
-var fieldset_default = Fieldset$1;
+var fieldset_default = Object.assign(Fieldset$1, {
+	Legend: FieldsetLegend,
+	Root: Fieldset$1
+});
 
 //#endregion
 //#region src/components/form/form.variants.ts
@@ -841,13 +855,13 @@ 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/icon-button/icon-button.variants.ts
@@ -873,20 +887,13 @@ var icon_button_default = IconButton;
 
 //#endregion
 //#region src/components/input/input.variants.ts
-const inputVariants = tv({
-	base: "input",
-	variants: { inputSize: {
-		lg: "input--lg",
-		md: "input--md",
-		sm: "input--sm"
-	} }
-});
+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
 	});
 };
@@ -898,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
@@ -965,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
@@ -1046,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 }) => {
@@ -1112,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
@@ -1210,12 +1220,13 @@ 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
@@ -1346,133 +1357,36 @@ 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/popover/popover.context.ts
-const PopoverContext = createContext(null);
+//#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({ slots: {
-	arrow: "popover__arrow",
-	backdrop: "popover__backdrop",
-	close: "popover__close",
-	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;
-};
+const popoverVariants = tv({ base: "popover" });
 
 //#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(slots.trigger(), className),
-		...props
-	});
-};
-const PopoverPortal = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Portal, {
-		className: cn$1(slots.portal(), className),
+	return /* @__PURE__ */ jsx(Popover, {
+		className: cn$1(popoverVariants()),
 		...props
 	});
 };
-const PopoverBackdrop = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Backdrop, {
-		className: cn$1(slots.backdrop(), className),
-		...props
-	});
-};
-const PopoverPositioner = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Positioner, {
-		className: cn$1(slots.positioner(), className),
-		...props
-	});
-};
-const PopoverPopup = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Popup, {
-		className: cn$1(slots.popup(), className),
-		...props
-	});
-};
-const PopoverArrow = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Arrow, {
-		className: cn$1(slots.arrow(), className),
-		...props
-	});
-};
-const PopoverViewport = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Viewport, {
-		className: cn$1(slots.viewport(), className),
-		...props
-	});
-};
-const PopoverTitle = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Title, {
-		className: cn$1(slots.title(), className),
-		...props
-	});
-};
-const PopoverDescription = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Description, {
-		className: cn$1(slots.description(), className),
-		...props
-	});
-};
-const PopoverClose = ({ className, ...props }) => {
-	const { slots } = usePopover();
-	return /* @__PURE__ */ jsx(Popover.Close, {
-		className: cn$1(slots.close(), className),
-		...props
-	});
-};
-Popover$1.Root = Popover$1;
-Popover$1.Trigger = PopoverTrigger;
-Popover$1.Portal = PopoverPortal;
-Popover$1.Backdrop = PopoverBackdrop;
-Popover$1.Positioner = PopoverPositioner;
-Popover$1.Popup = PopoverPopup;
-Popover$1.Arrow = PopoverArrow;
-Popover$1.Viewport = PopoverViewport;
-Popover$1.Title = PopoverTitle;
-Popover$1.Description = PopoverDescription;
-Popover$1.Close = PopoverClose;
 var popover_default = Popover$1;
 
 //#endregion
@@ -1559,12 +1473,13 @@ const ProgressIndicator = ({ className, ...props }) => {
 		...props
 	});
 };
-Progress$1.Label = ProgressLabel;
-Progress$1.Value = ProgressValue;
-Progress$1.Track = ProgressTrack;
-Progress$1.Indicator = ProgressIndicator;
-Progress$1.Root = Progress$1;
-var progress_default = Progress$1;
+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
@@ -1604,9 +1519,10 @@ const RadioIndicator = ({ className, ...props }) => {
 		...props
 	});
 };
-Radio$1.Root = Radio$1;
-Radio$1.Indicator = RadioIndicator;
-var radio_default = Radio$1;
+var radio_default = Object.assign(Radio$1, {
+	Indicator: RadioIndicator,
+	Root: Radio$1
+});
 
 //#endregion
 //#region src/components/radio-group/radio-group.variants.ts
@@ -1622,6 +1538,92 @@ const RadioGroup$1 = ({ className, ...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/slider/slider.context.ts
 const SliderContext = createContext(null);
@@ -1692,13 +1694,14 @@ const SliderThumb = ({ className, ...props }) => {
 		...props
 	});
 };
-Slider$1.Value = SliderValue;
-Slider$1.Control = SliderControl;
-Slider$1.Track = SliderTrack;
-Slider$1.Indicator = SliderIndicator;
-Slider$1.Thumb = SliderThumb;
-Slider$1.Root = Slider$1;
-var slider_default = Slider$1;
+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
@@ -1746,9 +1749,10 @@ 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
@@ -1828,14 +1832,15 @@ const TableFooter = ({ className, ...props }) => {
 		...props
 	});
 };
-Table.Root = Table;
-Table.Head = TableHead;
-Table.Row = TableRow;
-Table.HeaderCell = TableHeaderCell;
-Table.Body = TableBody;
-Table.DataCell = TableDataCell;
-Table.Footer = TableFooter;
-var table_default = Table;
+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
@@ -1899,12 +1904,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
@@ -1912,26 +1918,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
 	});
@@ -1959,5 +1976,5 @@ const ToggleButton = ({ className, variant, size, ...props }) => {
 var toggle_button_default = ToggleButton;
 
 //#endregion
-export { accordion_default as Accordion, 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, separator_default as Separator, slider_default as Slider, switch_default as Switch, table_default as Table, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, toggle_button_default as ToggleButton, accordionVariants, alertDialogVariants, 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, separatorVariants, sliderVariants, switchVariants, tableVariants, 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, 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, sliderVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textVariants, textareaVariants, toggleButtonVariants };
 //# sourceMappingURL=index.mjs.map