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

package/dist/index.d.mts

@@ -729,6 +729,136 @@ interface DialogTitleProps extends Dialog$1.Title.Props {}
 interface DialogDescriptionProps extends Dialog$1.Description.Props {}
 interface DialogCloseProps extends Dialog$1.Close.Props {}
 //#endregion
+//#region src/components/drawer/drawer.variants.d.ts
+declare const drawerVariants: tailwind_variants0.TVReturnType<{
+  position: {
+    bottom: {
+      popup: string;
+    };
+    left: {
+      popup: string;
+    };
+    right: {
+      popup: string;
+    };
+    top: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  close: string;
+  description: string;
+  popup: string;
+  portal: string;
+  root: string;
+  title: string;
+  trigger: string;
+  viewport: string;
+}, undefined, {
+  position: {
+    bottom: {
+      popup: string;
+    };
+    left: {
+      popup: string;
+    };
+    right: {
+      popup: string;
+    };
+    top: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  close: string;
+  description: string;
+  popup: string;
+  portal: string;
+  root: string;
+  title: string;
+  trigger: string;
+  viewport: string;
+}, tailwind_variants0.TVReturnType<{
+  position: {
+    bottom: {
+      popup: string;
+    };
+    left: {
+      popup: string;
+    };
+    right: {
+      popup: string;
+    };
+    top: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  close: string;
+  description: string;
+  popup: string;
+  portal: string;
+  root: string;
+  title: string;
+  trigger: string;
+  viewport: string;
+}, undefined, unknown, unknown, undefined>>;
+type DrawerVariants = VariantProps<typeof drawerVariants>;
+//#endregion
+//#region src/components/drawer/drawer.d.ts
+interface DrawerProps extends DrawerVariants, Dialog$1.Root.Props {}
+declare const Drawer: {
+  ({
+    position,
+    ...props
+  }: DrawerProps): react_jsx_runtime0.JSX.Element;
+  Root: /*elided*/any;
+  Trigger: ({
+    className,
+    ...props
+  }: DrawerTriggerProps) => react_jsx_runtime0.JSX.Element;
+  Portal: ({
+    className,
+    ...props
+  }: DrawerPortalProps) => react_jsx_runtime0.JSX.Element;
+  Backdrop: ({
+    className,
+    ...props
+  }: DrawerBackdropProps) => react_jsx_runtime0.JSX.Element;
+  Viewport: ({
+    className,
+    ...props
+  }: DrawerViewportProps) => react_jsx_runtime0.JSX.Element;
+  Popup: ({
+    className,
+    ...props
+  }: DrawerPopupProps) => react_jsx_runtime0.JSX.Element;
+  Title: ({
+    className,
+    ...props
+  }: DrawerTitleProps) => react_jsx_runtime0.JSX.Element;
+  Description: ({
+    className,
+    ...props
+  }: DrawerDescriptionProps) => react_jsx_runtime0.JSX.Element;
+  Close: ({
+    className,
+    children,
+    ...props
+  }: DrawerCloseProps) => react_jsx_runtime0.JSX.Element;
+};
+interface DrawerTriggerProps extends Dialog$1.Trigger.Props {}
+interface DrawerPortalProps extends Dialog$1.Portal.Props {}
+interface DrawerBackdropProps extends Dialog$1.Backdrop.Props {}
+interface DrawerViewportProps extends Dialog$1.Viewport.Props {}
+interface DrawerPopupProps extends Dialog$1.Popup.Props {}
+interface DrawerTitleProps extends Dialog$1.Title.Props {}
+interface DrawerDescriptionProps extends Dialog$1.Description.Props {}
+interface DrawerCloseProps extends Dialog$1.Close.Props {}
+//#endregion
 //#region src/components/field/field.variants.d.ts
 declare const fieldVariants: tailwind_variants0.TVReturnType<{
   size: {
@@ -1433,6 +1563,7 @@ declare const Navbar: {
   }: NavbarToggleProps) => react_jsx_runtime0.JSX.Element;
   Menu: ({
     className,
+    header,
     ...props
   }: NavbarMenuProps) => react_jsx_runtime0.JSX.Element;
   MenuItem: ({
@@ -1445,7 +1576,9 @@ interface NavbarContentProps extends React.ComponentProps<"div"> {}
 interface NavbarListProps extends React.ComponentProps<"ul"> {}
 interface NavbarListItemProps extends React.ComponentProps<"li"> {}
 interface NavbarToggleProps extends React.ComponentProps<"button"> {}
-interface NavbarMenuProps extends React.ComponentProps<"ul"> {}
+interface NavbarMenuProps extends React.ComponentProps<"ul"> {
+  header: React.ReactNode;
+}
 interface NavbarMenuItemProps extends React.ComponentProps<"li"> {}
 //#endregion
 //#region src/components/progress/progress.variants.d.ts
@@ -2060,5 +2193,5 @@ declare const ToggleButton: ({
   ...props
 }: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Accordion, AccordionVariants, AlertDialog, AlertDialogVariants, Avatar, AvatarVariants, Button, ButtonGroup, ButtonGroupVariants, ButtonVariants, Card, CardVariants, Checkbox, CheckboxGroup, CheckboxGroupVariants, CheckboxVariants, Chip, ChipVariants, Container, ContainerVariants, Dialog, DialogVariants, Field, FieldVariants, Fieldset, FieldsetVariants, Form, FormVariants, Input, InputVariants, Label, LabelVariants, Link, LinkVariants, List, ListVariants, Menu, MenuVariants, Meter, MeterVariants, Navbar, NavbarVariants, Progress, ProgressVariants, Separator, SeparatorVariants, Slider, SliderVariants, Switch, SwitchVariants, Table, TableVariants, Tabs, TabsVariants, Text, TextVariants, Textarea, TextareaVariants, ToggleButton, ToggleButtonVariants, accordionVariants, alertDialogVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, cn, containerVariants, dialogVariants, fieldVariants, fieldsetVariants, formVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, progressVariants, separatorVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
+export { Accordion, AccordionVariants, AlertDialog, AlertDialogVariants, Avatar, AvatarVariants, Button, ButtonGroup, ButtonGroupVariants, ButtonVariants, Card, CardVariants, Checkbox, CheckboxGroup, CheckboxGroupVariants, CheckboxVariants, Chip, ChipVariants, Container, ContainerVariants, Dialog, DialogVariants, Drawer, DrawerVariants, Field, FieldVariants, Fieldset, FieldsetVariants, Form, FormVariants, Input, InputVariants, Label, LabelVariants, Link, LinkVariants, List, ListVariants, Menu, MenuVariants, Meter, MeterVariants, Navbar, NavbarVariants, Progress, ProgressVariants, Separator, SeparatorVariants, Slider, SliderVariants, Switch, SwitchVariants, Table, TableVariants, Tabs, TabsVariants, Text, TextVariants, Textarea, TextareaVariants, ToggleButton, ToggleButtonVariants, accordionVariants, alertDialogVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, cn, containerVariants, dialogVariants, drawerVariants, fieldVariants, fieldsetVariants, formVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, progressVariants, separatorVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { cn, cn as cn$1, tv } from "tailwind-variants";
 import { Accordion, AlertDialog, Avatar, Button, Checkbox, CheckboxGroup, Dialog, Field, Fieldset, Input, Menu, Meter, Progress, 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 { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/accordion/accordion.context.ts
 const AccordionContext = createContext(null);
@@ -605,6 +605,117 @@ Dialog$1.Trigger = DialogTrigger;
 Dialog$1.Viewport = DialogViewport;
 var dialog_default = Dialog$1;
 
+//#endregion
+//#region src/components/drawer/drawer.context.ts
+const DrawerContext = createContext(null);
+
+//#endregion
+//#region src/components/drawer/drawer.variants.ts
+const drawerVariants = 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 = 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__ */ jsx(DrawerContext, {
+		value: { slots: useMemo(() => drawerVariants({ position }), [position]) },
+		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
+	});
+};
+const DrawerTrigger = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		className: cn$1(slots.trigger(), className),
+		...props
+	});
+};
+const DrawerPortal = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		className: cn$1(slots.portal(), className),
+		...props
+	});
+};
+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 DrawerDescription = ({ className, ...props }) => {
+	const { slots } = useDrawer();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn$1(slots.description(), className),
+		...props
+	});
+};
+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, {})
+	});
+};
+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);
@@ -1084,6 +1195,27 @@ Meter$1.Track = MeterTrack;
 Meter$1.Value = MeterValue;
 var meter_default = Meter$1;
 
+//#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
 const NavbarContext = createContext(null);
@@ -1169,12 +1301,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 }) => {
@@ -1263,27 +1403,6 @@ Progress$1.Indicator = ProgressIndicator;
 Progress$1.Root = Progress$1;
 var progress_default = Progress$1;
 
-//#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/slider/slider.context.ts
 const SliderContext = createContext(null);
@@ -1621,5 +1740,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, field_default as Field, fieldset_default as Fieldset, 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, progress_default as Progress, 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, fieldVariants, fieldsetVariants, formVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, progressVariants, separatorVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
+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, 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, progress_default as Progress, 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, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, progressVariants, separatorVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
 //# sourceMappingURL=index.mjs.map