@sikka/hawa 0.14.14-next → 0.14.15-next

package/dist/index.css

@@ -888,6 +888,10 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.hawa-my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
 .hawa-my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1189,6 +1193,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-w-1\/2 {
   width: 50%;
 }
+.hawa-w-1\/6 {
+  width: 16.666667%;
+}
 .hawa-w-10 {
   width: 2.5rem;
 }
@@ -1808,6 +1815,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-r-0 {
   border-right-width: 0px;
 }
+.hawa-border-r-4 {
+  border-right-width: 4px;
+}
 .hawa-border-t {
   border-top-width: 1px;
 }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, PropsWithChildren, RefObject } from 'react';
+import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, PropsWithChildren, RefObject, useEffect } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -1023,8 +1023,8 @@ type AppTopbarType = {
     size?: number;
     username?: string;
     email?: string;
-    profileMenuItems: MenuItemType[];
-    avatarImage: string;
+    profileMenuItems?: MenuItemType[];
+    avatarImage?: string;
 };
 declare const AppTopbar: React__default.FC<AppTopbarType>;
 
@@ -1066,24 +1066,17 @@ type AppTabsType = {
 declare const AppTabs: React__default.FC<AppTabsType>;
 
 type AppLayoutTypes = {
+    pages?: any[];
     /** The direction of the layout */
     direction?: DirectionType;
-    /** The title of the current selected page, make sure it's the same as the drawerItem slug */
-    currentPage: string;
     /** Specifies the title of the page. */
     pageTitle?: string;
     /** Specifies the symbol for the logo. */
     logoSymbol?: any;
     /** Specifies the link for the logo. */
     logoLink?: string;
-    /** Specifies the text for the logo. */
-    logoText?: any;
     /** Specifies the content to be displayed in the layout. */
     children?: any;
-    /** Specifies the username to be displayed. */
-    username?: string;
-    /** Specifies the user email to be displayed. */
-    email?: string;
     /** Specifies the image for the avatar. */
     avatarImage?: any;
     /**
@@ -1093,19 +1086,6 @@ type AppLayoutTypes = {
      * - 'large': Large.
      */
     drawerSize?: "sm" | "md" | "large";
-    /** Specifies the menu items for the profile menu. */
-    /**
-     * Specifies the width of the profile menu.
-     * - 'default': Default width.
-     * - 'sm': Small width.
-     * - 'lg': Large width.
-     * - 'parent': Inherits width from parent element.
-     */
-    profileMenuWidth: "default" | "sm" | "lg" | "parent";
-    /** Event handler for settings button click. */
-    onSettingsClick?: () => void;
-    /** Event handler for drawer expansion. */
-    onDrawerExpand?: (e: any) => void;
     /** Specifies whether to keep the drawer open. */
     keepOpen: boolean;
     setKeepOpen: (value: boolean) => void;
@@ -1115,18 +1095,13 @@ type AppLayoutTypes = {
     clickedItem?: any;
     /** Event handler for logo button click. */
     onLogoClick?: () => void;
-    /** Text labels for various UI elements. */
-    texts?: {
-        /** Label for expand sidebar button. */
-        expandSidebar?: string;
-        /** Label for collapse sidebar button. */
-        collapseSidebar?: string;
-    };
 };
 declare const DocsLayout: React__default.FunctionComponent<AppLayoutTypes>;
 
 type DocsSidebarType = {
-    test?: any;
+    pages: any[];
+    currentPage?: string;
+    direction?: DirectionType;
 };
 declare const DocsSidebar: React__default.FC<DocsSidebarType>;
 
@@ -1660,6 +1635,8 @@ type UsageCardTypes = {
 };
 declare const Usage: FC<UsageCardTypes>;
 
+declare const useIsomorphicEffect: typeof useEffect;
+
 type ToasterToast = ToastProps & {
     id: string;
     title?: React$1.ReactNode;
@@ -1739,4 +1716,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useIsomorphicEffect, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, PropsWithChildren, RefObject } from 'react';
+import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, PropsWithChildren, RefObject, useEffect } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -1023,8 +1023,8 @@ type AppTopbarType = {
     size?: number;
     username?: string;
     email?: string;
-    profileMenuItems: MenuItemType[];
-    avatarImage: string;
+    profileMenuItems?: MenuItemType[];
+    avatarImage?: string;
 };
 declare const AppTopbar: React__default.FC<AppTopbarType>;
 
@@ -1066,24 +1066,17 @@ type AppTabsType = {
 declare const AppTabs: React__default.FC<AppTabsType>;
 
 type AppLayoutTypes = {
+    pages?: any[];
     /** The direction of the layout */
     direction?: DirectionType;
-    /** The title of the current selected page, make sure it's the same as the drawerItem slug */
-    currentPage: string;
     /** Specifies the title of the page. */
     pageTitle?: string;
     /** Specifies the symbol for the logo. */
     logoSymbol?: any;
     /** Specifies the link for the logo. */
     logoLink?: string;
-    /** Specifies the text for the logo. */
-    logoText?: any;
     /** Specifies the content to be displayed in the layout. */
     children?: any;
-    /** Specifies the username to be displayed. */
-    username?: string;
-    /** Specifies the user email to be displayed. */
-    email?: string;
     /** Specifies the image for the avatar. */
     avatarImage?: any;
     /**
@@ -1093,19 +1086,6 @@ type AppLayoutTypes = {
      * - 'large': Large.
      */
     drawerSize?: "sm" | "md" | "large";
-    /** Specifies the menu items for the profile menu. */
-    /**
-     * Specifies the width of the profile menu.
-     * - 'default': Default width.
-     * - 'sm': Small width.
-     * - 'lg': Large width.
-     * - 'parent': Inherits width from parent element.
-     */
-    profileMenuWidth: "default" | "sm" | "lg" | "parent";
-    /** Event handler for settings button click. */
-    onSettingsClick?: () => void;
-    /** Event handler for drawer expansion. */
-    onDrawerExpand?: (e: any) => void;
     /** Specifies whether to keep the drawer open. */
     keepOpen: boolean;
     setKeepOpen: (value: boolean) => void;
@@ -1115,18 +1095,13 @@ type AppLayoutTypes = {
     clickedItem?: any;
     /** Event handler for logo button click. */
     onLogoClick?: () => void;
-    /** Text labels for various UI elements. */
-    texts?: {
-        /** Label for expand sidebar button. */
-        expandSidebar?: string;
-        /** Label for collapse sidebar button. */
-        collapseSidebar?: string;
-    };
 };
 declare const DocsLayout: React__default.FunctionComponent<AppLayoutTypes>;
 
 type DocsSidebarType = {
-    test?: any;
+    pages: any[];
+    currentPage?: string;
+    direction?: DirectionType;
 };
 declare const DocsSidebar: React__default.FC<DocsSidebarType>;
 
@@ -1660,6 +1635,8 @@ type UsageCardTypes = {
 };
 declare const Usage: FC<UsageCardTypes>;
 
+declare const useIsomorphicEffect: typeof useEffect;
+
 type ToasterToast = ToastProps & {
     id: string;
     title?: React$1.ReactNode;
@@ -1739,4 +1716,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useIsomorphicEffect, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -862,6 +862,9 @@ __export(components_exports, {
     useFocusWithin: function() {
         return useFocusWithin;
     },
+    useIsomorphicEffect: function() {
+        return useIsomorphicEffect;
+    },
     useMediaQuery: function() {
         return useMediaQuery;
     },
@@ -7688,43 +7691,68 @@ var useBreakpoint = function() {
 };
 // components/layout/DocsSidebar.tsx
 var import_react41 = __toESM(require("react"));
-var DocsSidebar = function(_param) {
-    var test = _param.test, props = _object_without_properties(_param, [
-        "test"
-    ]);
-    var pages = [
-        "Introduction",
-        "Installation",
-        "Usage",
-        "API Reference",
-        "FAQ"
-    ];
-    var _import_react41_default_useState = _sliced_to_array(import_react41.default.useState(pages[0]), 2), currentPage = _import_react41_default_useState[0], setCurrentPage = _import_react41_default_useState[1];
-    var handlePageClick = function(page) {
-        setCurrentPage(page);
+var DocsSidebar = function(param) {
+    var propCurrentPage = param.currentPage, pages = param.pages, direction = param.direction;
+    var _import_react41_default_useState = _sliced_to_array(import_react41.default.useState(pages[0]), 2), activePage = _import_react41_default_useState[0], setActivePage = _import_react41_default_useState[1];
+    var handlePageClick = function(page, event) {
+        event.preventDefault();
+        setTimeout(function() {
+            setActivePage(page);
+        }, 50);
+        var element = document.getElementById(page);
+        element === null || element === void 0 ? void 0 : element.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+        });
+    };
+    var getCurrentSection = function() {
+        for(var i = pages.length - 1; i >= 0; i--){
+            var page = pages[i];
+            var element = document.getElementById(page);
+            var rect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+            if (rect) {
+                if (rect.top < window.innerHeight && rect.bottom >= 0) {
+                    return page;
+                }
+            }
+        }
+        return pages[0];
+    };
+    import_react41.default.useEffect(function() {
+        var handleScroll = function() {
+            setActivePage(getCurrentSection());
+        };
+        window.addEventListener("scroll", handleScroll);
+        return function() {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    var selectedStyles = {
+        rtl: "hawa-border-r-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200",
+        ltr: "hawa-border-l-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200"
     };
     return /* @__PURE__ */ import_react41.default.createElement("div", {
-        className: "hawa-flex hawa-flex-col hawa-overflow-x-clip"
+        className: "hawa-flex hawa-flex-col hawa-overflow-x-clip",
+        dir: direction
     }, pages.map(function(page, index) {
-        return /* @__PURE__ */ import_react41.default.createElement("a", {
+        return /* @__PURE__ */ import_react41.default.createElement("div", {
             key: index,
-            className: cn("hawa-py-1 hawa-text-xs hawa-cursor-pointer  hawa-whitespace-nowrap hawa-px-3 hover:hawa-bg-gray-100 hawa-transition-all", currentPage === page ? "hawa-border-l-4  hawa-border-primary hawa-border-collapse" : ""),
-            onClick: function() {
-                return handlePageClick(page);
+            className: cn("hawa-py-1 hawa-text-xs hawa-cursor-pointer  hawa-whitespace-nowrap hawa-px-3 hover:hawa-bg-gray-100 hawa-transition-all", (propCurrentPage || activePage) === page ? selectedStyles[direction || "rtl"] : ""),
+            onClick: function(event) {
+                return handlePageClick(page, event);
             }
         }, page);
     }));
 };
 // components/layout/DocsLayout.tsx
 var DocsLayout = function(_param) {
-    var _param_direction = _param.direction, direction = _param_direction === void 0 ? "ltr" : _param_direction, _param_drawerSize = _param.drawerSize, drawerSize = _param_drawerSize === void 0 ? "md" : _param_drawerSize, onSettingsClick = _param.onSettingsClick, DrawerFooterActions = _param.DrawerFooterActions, currentPage = _param.currentPage, clickedItem = _param.clickedItem, keepOpen = _param.keepOpen, setKeepOpen = _param.setKeepOpen, props = _object_without_properties(_param, [
+    var _param_direction = _param.direction, direction = _param_direction === void 0 ? "ltr" : _param_direction, _param_drawerSize = _param.drawerSize, drawerSize = _param_drawerSize === void 0 ? "md" : _param_drawerSize, DrawerFooterActions = _param.DrawerFooterActions, clickedItem = _param.clickedItem, keepOpen = _param.keepOpen, pages = _param.pages, setKeepOpen = _param.setKeepOpen, props = _object_without_properties(_param, [
         "direction",
         "drawerSize",
-        "onSettingsClick",
         "DrawerFooterActions",
-        "currentPage",
         "clickedItem",
         "keepOpen",
+        "pages",
         "setKeepOpen"
     ]);
     var closeDrawerWidth = 0;
@@ -7747,7 +7775,8 @@ var DocsLayout = function(_param) {
     if (typeof window == "undefined") {
         size = 1200;
     }
-    var _ref = _sliced_to_array((0, import_react42.useState)(true), 2), openSideMenu = _ref[0], setOpenSideMenu = _ref[1];
+    var _ref = _sliced_to_array((0, import_react42.useState)("Introduction"), 2), currentPage = _ref[0], setCurrentPage = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react42.useState)(true), 2), openSideMenu = _ref1[0], setOpenSideMenu = _ref1[1];
     (0, import_react42.useEffect)(function() {
         var handleClickOutside = function(event) {
             if (ref.current && !ref.current.contains(event.target) && !openSideMenu) {
@@ -7773,6 +7802,35 @@ var DocsLayout = function(_param) {
     }, [
         keepOpen
     ]);
+    var observerRef = import_react42.default.useRef(null);
+    var handleIntersection = function(entries) {
+        var entry = entries.find(function(entry2) {
+            return entry2.isIntersecting;
+        });
+        if (entry) {
+            setCurrentPage(entry.target.id);
+        }
+    };
+    (0, import_react42.useEffect)(function() {
+        observerRef.current = new IntersectionObserver(handleIntersection, {
+            threshold: 0.5
+        });
+        import_react42.default.Children.forEach(props.children, function(child) {
+            if (child && child.props.id) {
+                var element = document.getElementById(child.props.id);
+                if (element && observerRef.current) {
+                    observerRef.current.observe(element);
+                }
+            }
+        });
+        return function() {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [
+        props.children
+    ]);
     var drawerSizeCondition = drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize];
     return /* @__PURE__ */ import_react42.default.createElement("div", {
         className: "hawa-fixed"
@@ -7806,7 +7864,10 @@ var DocsLayout = function(_param) {
     })))), /* @__PURE__ */ import_react42.default.createElement(SheetContent, {
         side: isRTL ? "right" : "left",
         className: "hawa-pt-10"
-    }, " ", /* @__PURE__ */ import_react42.default.createElement(DocsSidebar, null)))), /* @__PURE__ */ import_react42.default.createElement("div", {
+    }, /* @__PURE__ */ import_react42.default.createElement(DocsSidebar, {
+        direction: direction,
+        pages: pages || []
+    })))), /* @__PURE__ */ import_react42.default.createElement("div", {
         className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white", isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row")
     }, /* @__PURE__ */ import_react42.default.createElement(Button, {
         variant: "ghost",
@@ -7816,7 +7877,6 @@ var DocsLayout = function(_param) {
     })))), /* @__PURE__ */ import_react42.default.createElement("div", {
         className: cn("hawa-fixed hawa-bg-primary-foreground hawa-z-40 hawa-flex  hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all", isRTL ? "hawa-right-0 hawa-top-0 hawa-h-full" : "hawa-left-0 hawa-top-0 hawa-h-full", "hawa-fixed  hawa-p-0 hawa-py-2 hawa-overflow-x-clip hawa-transition-all", "hawa-top-14", openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"),
         style: {
-            //   height: "calc(100%)",
             width: size > 600 ? openSideMenu ? "".concat(drawerSizeStyle["opened"][drawerSize], "px") : "".concat(drawerSizeStyle["closed"][drawerSize], "px") : openSideMenu ? "".concat(drawerSizeStyle["opened"][drawerSize], "px") : "0px"
         },
         onMouseEnter: function() {
@@ -7828,7 +7888,11 @@ var DocsLayout = function(_param) {
             }
         },
         ref: ref
-    }, /* @__PURE__ */ import_react42.default.createElement(DocsSidebar, null)), /* @__PURE__ */ import_react42.default.createElement("div", null, "overlay sidebar"), /* @__PURE__ */ import_react42.default.createElement("div", {
+    }, /* @__PURE__ */ import_react42.default.createElement(DocsSidebar, {
+        direction: direction,
+        pages: pages || [],
+        currentPage: currentPage
+    })), /* @__PURE__ */ import_react42.default.createElement("div", {
         className: "hawa-fixed hawa-overflow-y-auto hawa-transition-all ",
         style: isRTL ? {
             height: "calc(100% - 56px)",
@@ -7838,7 +7902,6 @@ var DocsLayout = function(_param) {
         } : {
             height: "calc(100% - 56px)",
             width: "calc(100% - ".concat(drawerSizeCondition, "px)"),
-            // width: `calc(100% - ${0}px)`,
             left: "".concat(drawerSizeCondition, "px"),
             right: "".concat(drawerSizeCondition, "px"),
             top: "56px"
@@ -9860,20 +9923,23 @@ var Usage = function(props) {
         value: (_props_percent = props.percent) !== null && _props_percent !== void 0 ? _props_percent : 0
     }));
 };
-// components/hooks/useDiscloser.ts
+// components/hooks/useIsomorphicEffect.ts
 var import_react67 = require("react");
-// components/hooks/useHover.ts
+var useIsomorphicEffect = typeof document !== "undefined" ? import_react67.useLayoutEffect : import_react67.useEffect;
+// components/hooks/useDiscloser.ts
 var import_react68 = require("react");
-// components/hooks/useCarousel.ts
+// components/hooks/useHover.ts
 var import_react69 = require("react");
-// components/hooks/useWindowSize.ts
+// components/hooks/useCarousel.ts
 var import_react70 = require("react");
+// components/hooks/useWindowSize.ts
+var import_react71 = require("react");
 var useWindowSize = function() {
-    var _ref = _sliced_to_array((0, import_react70.useState)({
+    var _ref = _sliced_to_array((0, import_react71.useState)({
         width: void 0,
         height: void 0
     }), 2), windowSize = _ref[0], setWindowSize = _ref[1];
-    (0, import_react70.useEffect)(function() {
+    (0, import_react71.useEffect)(function() {
         var handleResize = function handleResize() {
             setWindowSize({
                 width: window.innerWidth,
@@ -9889,7 +9955,7 @@ var useWindowSize = function() {
     return windowSize;
 };
 // components/hooks/useFocusWithin.ts
-var import_react71 = require("react");
+var import_react72 = require("react");
 function containsRelatedTarget(event) {
     if (_instanceof(event.currentTarget, HTMLElement) && _instanceof(event.relatedTarget, HTMLElement)) {
         return event.currentTarget.contains(event.relatedTarget);
@@ -9898,9 +9964,9 @@ function containsRelatedTarget(event) {
 }
 function useFocusWithin() {
     var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
-    var ref = (0, import_react71.useRef)(null);
-    var _ref1 = _sliced_to_array((0, import_react71.useState)(false), 2), focused = _ref1[0], _setFocused = _ref1[1];
-    var focusedRef = (0, import_react71.useRef)(false);
+    var ref = (0, import_react72.useRef)(null);
+    var _ref1 = _sliced_to_array((0, import_react72.useState)(false), 2), focused = _ref1[0], _setFocused = _ref1[1];
+    var focusedRef = (0, import_react72.useRef)(false);
     var setFocused = function(value) {
         _setFocused(value);
         focusedRef.current = value;
@@ -9917,7 +9983,7 @@ function useFocusWithin() {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         }
     };
-    (0, import_react71.useEffect)(function() {
+    (0, import_react72.useEffect)(function() {
         if (ref.current) {
             ref.current.addEventListener("focusin", handleFocusIn);
             ref.current.addEventListener("focusout", handleFocusOut);
@@ -9938,7 +10004,7 @@ function useFocusWithin() {
     };
 }
 // components/hooks/useMediaQuery.ts
-var import_react72 = require("react");
+var import_react73 = require("react");
 function attachMediaListener(query, callback) {
     try {
         query.addEventListener("change", callback);
@@ -9965,9 +10031,9 @@ function useMediaQuery(query, initialValue) {
     var getInitialValueInEffect = (arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
         getInitialValueInEffect: true
     }).getInitialValueInEffect;
-    var _ref = _sliced_to_array((0, import_react72.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)), 2), matches = _ref[0], setMatches = _ref[1];
-    var queryRef = (0, import_react72.useRef)();
-    (0, import_react72.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react73.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)), 2), matches = _ref[0], setMatches = _ref[1];
+    var queryRef = (0, import_react73.useRef)();
+    (0, import_react73.useEffect)(function() {
         if ("matchMedia" in window) {
             queryRef.current = window.matchMedia(query);
             setMatches(queryRef.current.matches);
@@ -9982,15 +10048,15 @@ function useMediaQuery(query, initialValue) {
     return matches;
 }
 // components/hooks/useScrollPosition.ts
-var import_react73 = require("react");
-// components/hooks/useTable.ts
 var import_react74 = require("react");
-// components/hooks/useTabs.ts
+// components/hooks/useTable.ts
 var import_react75 = require("react");
+// components/hooks/useTabs.ts
+var import_react76 = require("react");
 function useTabs() {
     var initialTab = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-    var _ref = _sliced_to_array((0, import_react75.useState)(initialTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
-    (0, import_react75.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react76.useState)(initialTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
+    (0, import_react76.useEffect)(function() {
         var handleHashChange = function() {
             var hash = window.location.hash.substring(1);
             setActiveTab(hash || initialTab);
@@ -10186,6 +10252,7 @@ function useTabs() {
     useBreakpoint: useBreakpoint,
     useClipboard: useClipboard,
     useFocusWithin: useFocusWithin,
+    useIsomorphicEffect: useIsomorphicEffect,
     useMediaQuery: useMediaQuery,
     useTabs: useTabs,
     useToast: useToast,

package/dist/index.mjs

@@ -7708,41 +7708,75 @@ var useBreakpoint = () => {
 
 // components/layout/DocsSidebar.tsx
 import React67 from "react";
-var DocsSidebar = ({ test, ...props }) => {
-  const pages = [
-    "Introduction",
-    "Installation",
-    "Usage",
-    "API Reference",
-    "FAQ"
-  ];
-  const [currentPage, setCurrentPage] = React67.useState(pages[0]);
-  const handlePageClick = (page) => {
-    setCurrentPage(page);
+var DocsSidebar = ({
+  currentPage: propCurrentPage,
+  pages,
+  direction
+}) => {
+  const [activePage, setActivePage] = React67.useState(pages[0]);
+  const handlePageClick = (page, event) => {
+    event.preventDefault();
+    setTimeout(() => {
+      setActivePage(page);
+    }, 50);
+    const element = document.getElementById(page);
+    element?.scrollIntoView({ behavior: "smooth", block: "start" });
   };
-  return /* @__PURE__ */ React67.createElement("div", { className: "hawa-flex hawa-flex-col hawa-overflow-x-clip" }, pages.map((page, index) => /* @__PURE__ */ React67.createElement(
-    "a",
+  const getCurrentSection = () => {
+    for (let i = pages.length - 1; i >= 0; i--) {
+      const page = pages[i];
+      const element = document.getElementById(page);
+      const rect = element?.getBoundingClientRect();
+      if (rect) {
+        if (rect.top < window.innerHeight && rect.bottom >= 0) {
+          return page;
+        }
+      }
+    }
+    return pages[0];
+  };
+  React67.useEffect(() => {
+    const handleScroll = () => {
+      setActivePage(getCurrentSection());
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  let selectedStyles = {
+    rtl: "hawa-border-r-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200",
+    ltr: "hawa-border-l-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200"
+  };
+  return /* @__PURE__ */ React67.createElement(
+    "div",
     {
-      key: index,
-      className: cn(
-        "hawa-py-1 hawa-text-xs hawa-cursor-pointer  hawa-whitespace-nowrap hawa-px-3 hover:hawa-bg-gray-100 hawa-transition-all",
-        currentPage === page ? "hawa-border-l-4  hawa-border-primary hawa-border-collapse" : ""
-      ),
-      onClick: () => handlePageClick(page)
+      className: "hawa-flex hawa-flex-col hawa-overflow-x-clip",
+      dir: direction
     },
-    page
-  )));
+    pages.map((page, index) => /* @__PURE__ */ React67.createElement(
+      "div",
+      {
+        key: index,
+        className: cn(
+          "hawa-py-1 hawa-text-xs hawa-cursor-pointer  hawa-whitespace-nowrap hawa-px-3 hover:hawa-bg-gray-100 hawa-transition-all",
+          (propCurrentPage || activePage) === page ? selectedStyles[direction || "rtl"] : ""
+        ),
+        onClick: (event) => handlePageClick(page, event)
+      },
+      page
+    ))
+  );
 };
 
 // components/layout/DocsLayout.tsx
 var DocsLayout = ({
   direction = "ltr",
   drawerSize = "md",
-  onSettingsClick,
   DrawerFooterActions,
-  currentPage,
   clickedItem,
   keepOpen,
+  pages,
   setKeepOpen,
   ...props
 }) => {
@@ -7766,6 +7800,7 @@ var DocsLayout = ({
   if (typeof window == "undefined") {
     size = 1200;
   }
+  const [currentPage, setCurrentPage] = useState27("Introduction");
   const [openSideMenu, setOpenSideMenu] = useState27(true);
   useEffect19(() => {
     const handleClickOutside = (event) => {
@@ -7788,6 +7823,32 @@ var DocsLayout = ({
       window.removeEventListener("resize", handleResize);
     };
   }, [keepOpen]);
+  const observerRef = React68.useRef(null);
+  const handleIntersection = (entries) => {
+    const entry = entries.find((entry2) => entry2.isIntersecting);
+    if (entry) {
+      setCurrentPage(entry.target.id);
+    }
+  };
+  useEffect19(() => {
+    observerRef.current = new IntersectionObserver(handleIntersection, {
+      threshold: 0.5
+      // Adjust threshold as needed to determine when a section is in view
+    });
+    React68.Children.forEach(props.children, (child) => {
+      if (child && child.props.id) {
+        const element = document.getElementById(child.props.id);
+        if (element && observerRef.current) {
+          observerRef.current.observe(element);
+        }
+      }
+    });
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [props.children]);
   let drawerSizeCondition = drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize];
   return /* @__PURE__ */ React68.createElement("div", { className: "hawa-fixed" }, /* @__PURE__ */ React68.createElement(
     "div",
@@ -7846,8 +7907,7 @@ var DocsLayout = ({
             side: isRTL ? "right" : "left",
             className: "hawa-pt-10"
           },
-          " ",
-          /* @__PURE__ */ React68.createElement(DocsSidebar, null)
+          /* @__PURE__ */ React68.createElement(DocsSidebar, { direction, pages: pages || [] })
         ))
       )
     ),
@@ -7872,7 +7932,6 @@ var DocsLayout = ({
         openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"
       ),
       style: {
-        //   height: "calc(100%)",
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
       },
       onMouseEnter: () => {
@@ -7885,8 +7944,15 @@ var DocsLayout = ({
       },
       ref
     },
-    /* @__PURE__ */ React68.createElement(DocsSidebar, null)
-  ), /* @__PURE__ */ React68.createElement("div", null, "overlay sidebar"), /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React68.createElement(
+      DocsSidebar,
+      {
+        direction,
+        pages: pages || [],
+        currentPage
+      }
+    )
+  ), /* @__PURE__ */ React68.createElement(
     "div",
     {
       className: "hawa-fixed hawa-overflow-y-auto hawa-transition-all ",
@@ -7898,7 +7964,6 @@ var DocsLayout = ({
       } : {
         height: "calc(100% - 56px)",
         width: `calc(100% - ${drawerSizeCondition}px)`,
-        // width: `calc(100% - ${0}px)`,
         left: `${drawerSizeCondition}px`,
         right: `${drawerSizeCondition}px`,
         top: "56px"
@@ -9883,23 +9948,27 @@ var Usage = (props) => {
   ))), /* @__PURE__ */ React92.createElement("div", { className: "hawa-bg-white-100 hawa-flex hawa-flex-row" }, /* @__PURE__ */ React92.createElement("div", null, props.currentUsage), /* @__PURE__ */ React92.createElement("div", null, " (", props.percent, "%)")), /* @__PURE__ */ React92.createElement(Progress, { value: props.percent ?? 0 }));
 };
 
+// components/hooks/useIsomorphicEffect.ts
+import { useEffect as useEffect23, useLayoutEffect } from "react";
+var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect23;
+
 // components/hooks/useDiscloser.ts
 import { useState as useState37 } from "react";
 
 // components/hooks/useHover.ts
-import { useEffect as useEffect23, useRef as useRef13, useState as useState38 } from "react";
+import { useEffect as useEffect24, useRef as useRef13, useState as useState38 } from "react";
 
 // components/hooks/useCarousel.ts
 import { useState as useState39, useRef as useRef14 } from "react";
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect24, useState as useState40 } from "react";
+import { useEffect as useEffect25, useState as useState40 } from "react";
 var useWindowSize = () => {
   const [windowSize, setWindowSize] = useState40({
     width: void 0,
     height: void 0
   });
-  useEffect24(() => {
+  useEffect25(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -9914,7 +9983,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef15, useState as useState41, useEffect as useEffect25 } from "react";
+import { useRef as useRef15, useState as useState41, useEffect as useEffect26 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -9944,7 +10013,7 @@ function useFocusWithin({
       onBlur?.(event);
     }
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -9959,7 +10028,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState42, useEffect as useEffect26, useRef as useRef16 } from "react";
+import { useState as useState42, useEffect as useEffect27, useRef as useRef16 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -9985,7 +10054,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef16();
-  useEffect26(() => {
+  useEffect27(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -10000,16 +10069,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState43, useEffect as useEffect27 } from "react";
+import { useState as useState43, useEffect as useEffect28 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState44, useEffect as useEffect28 } from "react";
+import { useState as useState44, useEffect as useEffect29 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect29, useState as useState45 } from "react";
+import { useEffect as useEffect30, useState as useState45 } from "react";
 function useTabs(initialTab = "") {
   const [activeTab, setActiveTab] = useState45(initialTab);
-  useEffect29(() => {
+  useEffect30(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);
@@ -10202,6 +10271,7 @@ export {
   useBreakpoint,
   useClipboard,
   useFocusWithin,
+  useIsomorphicEffect,
   useMediaQuery,
   useTabs,
   useToast,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.14.14-next",
+  "version": "0.14.15-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {