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

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);
@@ -1112,6 +1223,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 +1329,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 }) => {
@@ -1291,27 +1431,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,6 +1779,7 @@ 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;
@@ -1696,6 +1816,7 @@ Object.defineProperty(exports, 'cn', {
 });
 exports.containerVariants = containerVariants;
 exports.dialogVariants = dialogVariants;
+exports.drawerVariants = drawerVariants;
 exports.fieldVariants = fieldVariants;
 exports.fieldsetVariants = fieldsetVariants;
 exports.formVariants = formVariants;