@fea-ui/react 0.1.0-alpha.4 → 0.1.0-alpha.7

package/dist/index.cjs

@@ -633,6 +633,117 @@ Dialog.Trigger = DialogTrigger;
 Dialog.Viewport = DialogViewport;
 var dialog_default = Dialog;
 
+//#endregion
+//#region src/components/drawer/drawer.context.ts
+const DrawerContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/drawer/drawer.variants.ts
+const drawerVariants = (0, tailwind_variants.tv)({
+	defaultVariants: { position: "left" },
+	slots: {
+		backdrop: "drawer__backdrop",
+		close: "drawer__close",
+		description: "drawer__description",
+		popup: "drawer__popup",
+		portal: "drawer__portal",
+		root: "drawer",
+		title: "drawer__title",
+		trigger: "drawer__trigger",
+		viewport: "drawer__viewport"
+	},
+	variants: { position: {
+		bottom: { popup: "drawer--bottom" },
+		left: { popup: "drawer--left" },
+		right: { popup: "drawer--right" },
+		top: { popup: "drawer--top" }
+	} }
+});
+
+//#endregion
+//#region src/components/drawer/use-drawer.ts
+const useDrawer = () => {
+	const context = (0, react.useContext)(DrawerContext);
+	if (!context) throw new Error("useDrawer must be used within a DrawerProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/drawer/drawer.tsx
+const Drawer = ({ position, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContext, {
+		value: { slots: (0, react.useMemo)(() => drawerVariants({ position }), [position]) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Root, { ...props })
+	});
+};
+const DrawerTrigger = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Trigger, {
+		className: (0, tailwind_variants.cn)(slots.trigger(), className),
+		...props
+	});
+};
+const DrawerPortal = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Portal, {
+		className: (0, tailwind_variants.cn)(slots.portal(), className),
+		...props
+	});
+};
+const DrawerBackdrop = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Backdrop, {
+		className: (0, tailwind_variants.cn)(slots.backdrop(), className),
+		...props
+	});
+};
+const DrawerViewport = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Viewport, {
+		className: (0, tailwind_variants.cn)(slots.viewport(), className),
+		...props
+	});
+};
+const DrawerPopup = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Popup, {
+		className: (0, tailwind_variants.cn)(slots.popup(), className),
+		...props
+	});
+};
+const DrawerTitle = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Title, {
+		className: (0, tailwind_variants.cn)(slots.title(), className),
+		...props
+	});
+};
+const DrawerDescription = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Description, {
+		className: (0, tailwind_variants.cn)(slots.description(), className),
+		...props
+	});
+};
+const DrawerClose = ({ className, children, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Close, {
+		className: (0, tailwind_variants.cn)(slots.close(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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 = (0, react.createContext)(null);
@@ -766,6 +877,28 @@ const Form = ({ className, ...props }) => {
 };
 var form_default = Form;
 
+//#endregion
+//#region src/components/icon-button/icon-button.variants.ts
+const iconButtonVariants = (0, tailwind_variants.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__ */ (0, react_jsx_runtime.jsx)(button_default, {
+		className: (0, tailwind_variants.cn)(className, iconButtonVariants({
+			isIconOnly,
+			size,
+			variant
+		})),
+		...props
+	});
+};
+var icon_button_default = IconButton;
+
 //#endregion
 //#region src/components/input/input.variants.ts
 const inputVariants = (0, tailwind_variants.tv)({
@@ -1112,6 +1245,27 @@ Meter.Track = MeterTrack;
 Meter.Value = MeterValue;
 var meter_default = Meter;
 
+//#endregion
+//#region src/components/separator/separator.variants.ts
+const separatorVariants = (0, tailwind_variants.tv)({
+	base: "separator",
+	defaultVariants: { orientation: "horizontal" },
+	variants: { orientation: {
+		horizontal: "separator--horizontal",
+		vertical: "separator--vertical"
+	} }
+});
+
+//#endregion
+//#region src/components/separator/separator.tsx
+const Separator = ({ className, orientation, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Separator, {
+		className: (0, tailwind_variants.cn)(className, separatorVariants({ orientation })),
+		...props
+	});
+};
+var separator_default = Separator;
+
 //#endregion
 //#region src/components/navbar/navbar.context.ts
 const NavbarContext = (0, react.createContext)(null);
@@ -1197,12 +1351,20 @@ const NavbarToggle = ({ className, ...props }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-5" })
 	});
 };
-const NavbarMenu = ({ className, ...props }) => {
-	const { slots, isOpen } = useNavbar();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-		className: (0, tailwind_variants.cn)(slots.menu(), className),
-		"data-expanded": isOpen ? "true" : "false",
-		...props
+const NavbarMenu = ({ className, header, ...props }) => {
+	const { slots, isOpen, onOpenChange } = useNavbar();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(drawer_default, {
+		onOpenChange,
+		open: isOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(drawer_default.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(drawer_default.Backdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(drawer_default.Viewport, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(drawer_default.Popup, { children: [
+			header,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(drawer_default.Close, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(separator_default, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: (0, tailwind_variants.cn)(slots.menu(), className),
+				...props
+			})
+		] }) })] })
 	});
 };
 const NavbarMenuItem = ({ className, ...props }) => {
@@ -1222,6 +1384,125 @@ Navbar.Menu = NavbarMenu;
 Navbar.MenuItem = NavbarMenuItem;
 var navbar_default = Navbar;
 
+//#endregion
+//#region src/components/popover/popover.context.ts
+const PopoverContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/popover/popover.variants.ts
+const popoverVariants = (0, tailwind_variants.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 = (0, react.useContext)(PopoverContext);
+	if (!context) throw new Error("usePopover must be used within a PopoverProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/popover/popover.tsx
+const Popover = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContext, {
+		value: { slots: (0, react.useMemo)(() => popoverVariants(), []) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Root, { ...props })
+	});
+};
+const PopoverTrigger = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Trigger, {
+		className: (0, tailwind_variants.cn)(slots.trigger(), className),
+		...props
+	});
+};
+const PopoverPortal = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Portal, {
+		className: (0, tailwind_variants.cn)(slots.portal(), className),
+		...props
+	});
+};
+const PopoverBackdrop = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Backdrop, {
+		className: (0, tailwind_variants.cn)(slots.backdrop(), className),
+		...props
+	});
+};
+const PopoverPositioner = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Positioner, {
+		className: (0, tailwind_variants.cn)(slots.positioner(), className),
+		...props
+	});
+};
+const PopoverPopup = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Popup, {
+		className: (0, tailwind_variants.cn)(slots.popup(), className),
+		...props
+	});
+};
+const PopoverArrow = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Arrow, {
+		className: (0, tailwind_variants.cn)(slots.arrow(), className),
+		...props
+	});
+};
+const PopoverViewport = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Viewport, {
+		className: (0, tailwind_variants.cn)(slots.viewport(), className),
+		...props
+	});
+};
+const PopoverTitle = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Title, {
+		className: (0, tailwind_variants.cn)(slots.title(), className),
+		...props
+	});
+};
+const PopoverDescription = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Description, {
+		className: (0, tailwind_variants.cn)(slots.description(), className),
+		...props
+	});
+};
+const PopoverClose = ({ className, ...props }) => {
+	const { slots } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Popover.Close, {
+		className: (0, tailwind_variants.cn)(slots.close(), className),
+		...props
+	});
+};
+Popover.Root = Popover;
+Popover.Trigger = PopoverTrigger;
+Popover.Portal = PopoverPortal;
+Popover.Backdrop = PopoverBackdrop;
+Popover.Positioner = PopoverPositioner;
+Popover.Popup = PopoverPopup;
+Popover.Arrow = PopoverArrow;
+Popover.Viewport = PopoverViewport;
+Popover.Title = PopoverTitle;
+Popover.Description = PopoverDescription;
+Popover.Close = PopoverClose;
+var popover_default = Popover;
+
 //#endregion
 //#region src/components/progress/progress.context.ts
 const ProgressContext = (0, react.createContext)(null);
@@ -1291,27 +1572,6 @@ Progress.Indicator = ProgressIndicator;
 Progress.Root = Progress;
 var progress_default = Progress;
 
-//#endregion
-//#region src/components/separator/separator.variants.ts
-const separatorVariants = (0, tailwind_variants.tv)({
-	base: "separator",
-	defaultVariants: { orientation: "horizontal" },
-	variants: { orientation: {
-		horizontal: "separator--horizontal",
-		vertical: "separator--vertical"
-	} }
-});
-
-//#endregion
-//#region src/components/separator/separator.tsx
-const Separator = ({ className, orientation, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Separator, {
-		className: (0, tailwind_variants.cn)(className, separatorVariants({ orientation })),
-		...props
-	});
-};
-var separator_default = Separator;
-
 //#endregion
 //#region src/components/slider/slider.context.ts
 const SliderContext = (0, react.createContext)(null);
@@ -1660,9 +1920,11 @@ exports.CheckboxGroup = checkbox_group_default;
 exports.Chip = chip_default;
 exports.Container = container_default;
 exports.Dialog = dialog_default;
+exports.Drawer = drawer_default;
 exports.Field = field_default;
 exports.Fieldset = fieldset_default;
 exports.Form = form_default;
+exports.IconButton = icon_button_default;
 exports.Input = input_default;
 exports.Label = label_default;
 exports.Link = link_default;
@@ -1670,6 +1932,7 @@ exports.List = list_default;
 exports.Menu = menu_default;
 exports.Meter = meter_default;
 exports.Navbar = navbar_default;
+exports.Popover = popover_default;
 exports.Progress = progress_default;
 exports.Separator = separator_default;
 exports.Slider = slider_default;
@@ -1696,9 +1959,11 @@ Object.defineProperty(exports, 'cn', {
 });
 exports.containerVariants = containerVariants;
 exports.dialogVariants = dialogVariants;
+exports.drawerVariants = drawerVariants;
 exports.fieldVariants = fieldVariants;
 exports.fieldsetVariants = fieldsetVariants;
 exports.formVariants = formVariants;
+exports.iconButtonVariants = iconButtonVariants;
 exports.inputVariants = inputVariants;
 exports.labelVariants = labelVariants;
 exports.linkVariants = linkVariants;
@@ -1706,6 +1971,7 @@ exports.listVariants = listVariants;
 exports.menuVariants = menuVariants;
 exports.meterVariants = meterVariants;
 exports.navbarVariants = navbarVariants;
+exports.popoverVariants = popoverVariants;
 exports.progressVariants = progressVariants;
 exports.separatorVariants = separatorVariants;
 exports.sliderVariants = sliderVariants;