@fea-ui/react 0.1.0-alpha.4 → 1.0.0-alpha.5

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);
@@ -1660,6 +1771,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 +1808,7 @@ Object.defineProperty(exports, 'cn', {
 });
 exports.containerVariants = containerVariants;
 exports.dialogVariants = dialogVariants;
+exports.drawerVariants = drawerVariants;
 exports.fieldVariants = fieldVariants;
 exports.fieldsetVariants = fieldsetVariants;
 exports.formVariants = formVariants;