@sikka/hawa 0.16.0-next → 0.16.1-next

package/dist/index.d.mts

@@ -10,6 +10,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as embla_carousel_react from 'embla-carousel-react';
 import { EmblaOptionsType } from 'embla-carousel-react';
 import { RowData, ColumnDef } from '@tanstack/react-table';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -405,12 +406,18 @@ declare const DialogFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
-interface DialogStepsProps {
+interface DialogCarouselProps {
     activeStep: string;
     children: React$1.ReactNode;
     stepsApi?: any;
     stepsRef?: any;
 }
+declare const DialogCarousel: React$1.FC<DialogCarouselProps>;
+interface DialogStepsProps {
+    currentStep: string;
+    visibleStepRef: React$1.RefObject<HTMLDivElement>;
+    children: React$1.ReactNode;
+}
 declare const DialogSteps: React$1.FC<DialogStepsProps>;
 interface DialogStepProps {
     id: string;
@@ -1741,6 +1748,22 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
+declare const useDialogCarousel: (initialStepId: any, stepIds: any) => {
+    emblaRef: <ViewportElement extends HTMLElement>(instance: ViewportElement | null) => void;
+    emblaApi: embla_carousel_react.EmblaCarouselType | undefined;
+    currentStep: any;
+    nextStep: () => void;
+    prevStep: () => void;
+};
+
+declare const useMultiStepDialog: (initialStep: any, stepIds: any[], setOpenDialog: any) => {
+    currentStep: any;
+    dialogHeight: null;
+    visibleStepRef: React__default.MutableRefObject<any>;
+    handleNext: () => void;
+    handleBack: () => void;
+};
+
 declare function useClipboard({ timeout }?: {
     timeout?: number | undefined;
 }): {
@@ -1777,4 +1800,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, Avatar, 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, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, 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, DialogBody, DialogCarousel, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, 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, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as embla_carousel_react from 'embla-carousel-react';
 import { EmblaOptionsType } from 'embla-carousel-react';
 import { RowData, ColumnDef } from '@tanstack/react-table';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -405,12 +406,18 @@ declare const DialogFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
-interface DialogStepsProps {
+interface DialogCarouselProps {
     activeStep: string;
     children: React$1.ReactNode;
     stepsApi?: any;
     stepsRef?: any;
 }
+declare const DialogCarousel: React$1.FC<DialogCarouselProps>;
+interface DialogStepsProps {
+    currentStep: string;
+    visibleStepRef: React$1.RefObject<HTMLDivElement>;
+    children: React$1.ReactNode;
+}
 declare const DialogSteps: React$1.FC<DialogStepsProps>;
 interface DialogStepProps {
     id: string;
@@ -1741,6 +1748,22 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
+declare const useDialogCarousel: (initialStepId: any, stepIds: any) => {
+    emblaRef: <ViewportElement extends HTMLElement>(instance: ViewportElement | null) => void;
+    emblaApi: embla_carousel_react.EmblaCarouselType | undefined;
+    currentStep: any;
+    nextStep: () => void;
+    prevStep: () => void;
+};
+
+declare const useMultiStepDialog: (initialStep: any, stepIds: any[], setOpenDialog: any) => {
+    currentStep: any;
+    dialogHeight: null;
+    visibleStepRef: React__default.MutableRefObject<any>;
+    handleNext: () => void;
+    handleBack: () => void;
+};
+
 declare function useClipboard({ timeout }?: {
     timeout?: number | undefined;
 }): {
@@ -1777,4 +1800,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, Avatar, 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, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, 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, DialogBody, DialogCarousel, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, 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, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -496,6 +496,9 @@ __export(components_exports, {
     DialogBody: function() {
         return DialogBody;
     },
+    DialogCarousel: function() {
+        return DialogCarousel;
+    },
     DialogContent: function() {
         return DialogContent;
     },
@@ -877,6 +880,9 @@ __export(components_exports, {
     useClipboard: function() {
         return useClipboard;
     },
+    useDialogCarousel: function() {
+        return useDialogCarousel;
+    },
     useFocusWithin: function() {
         return useFocusWithin;
     },
@@ -886,6 +892,9 @@ __export(components_exports, {
     useMediaQuery: function() {
         return useMediaQuery;
     },
+    useMultiStepDialog: function() {
+        return useMultiStepDialog;
+    },
     useTabs: function() {
         return useTabs;
     },
@@ -4192,7 +4201,7 @@ var DialogFooter = function(_param) /* @__PURE__ */ {
         className: cn("hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end sm:hawa-gap-2", className)
     }, props));
 };
-var DialogSteps = function(param) {
+var DialogCarousel = function(param) {
     var stepsApi = param.stepsApi, stepsRef = param.stepsRef, activeStep = param.activeStep, children = param.children;
     var _React25_useState = _sliced_to_array(React25.useState(0), 2), selectedIndex = _React25_useState[0], setSelectedIndex = _React25_useState[1];
     var steps = React25.Children.toArray(children);
@@ -4228,6 +4237,31 @@ var DialogSteps = function(param) {
         }, child);
     }))));
 };
+var DialogSteps = function(param) {
+    var currentStep = param.currentStep, visibleStepRef = param.visibleStepRef, children = param.children;
+    var _React25_useState = _sliced_to_array(React25.useState(null), 2), dialogHeight = _React25_useState[0], setDialogHeight = _React25_useState[1];
+    React25.useEffect(function() {
+        if (visibleStepRef.current) {
+            setDialogHeight(visibleStepRef.current.offsetHeight);
+            console.log("height is ", visibleStepRef.current.offsetHeight);
+        }
+    }, [
+        currentStep,
+        visibleStepRef
+    ]);
+    return /* @__PURE__ */ React25.createElement("div", {
+        className: "hawa-relative hawa-overflow-clip",
+        style: {
+            height: dialogHeight || "fit-content",
+            transition: "height 0.2s"
+        }
+    }, React25.Children.map(children, function(child, index) {
+        return /* @__PURE__ */ React25.createElement("div", {
+            ref: currentStep === "step-".concat(index + 1) ? visibleStepRef : null,
+            className: cn(currentStep === "step-".concat(index + 1) ? "hawa-visible hawa-block" : "hawa-invisible hawa-hidden")
+        }, child);
+    }));
+};
 var DialogStep = function(param) {
     var id = param.id, children = param.children, className = param.className, stepRef = param.stepRef;
     return /* @__PURE__ */ React25.createElement("div", {
@@ -4242,9 +4276,10 @@ var DialogBody = function(param) {
         className: cn("hawa-py-6", className)
     }, children);
 };
-DialogStep.displayName = "DialogStep";
 DialogBody.displayName = "DialogBody";
+DialogStep.displayName = "DialogStep";
 DialogSteps.displayName = "DialogSteps";
+DialogCarousel.displayName = "DialogCarousel";
 DialogHeader.displayName = "DialogHeader";
 DialogFooter.displayName = "DialogFooter";
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
@@ -10073,18 +10108,85 @@ var import_react70 = require("react");
 var import_react71 = require("react");
 // components/hooks/useCarousel.ts
 var import_react72 = require("react");
-// components/hooks/useDialogSteps.ts
+// components/hooks/useDialogCarousel.ts
 var import_react73 = require("react");
 var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var import_embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
-// components/hooks/useWindowSize.ts
+var useDialogCarousel = function(initialStepId, stepIds) {
+    var _ref = _sliced_to_array((0, import_embla_carousel_react2.default)({
+        loop: false,
+        watchDrag: false
+    }, [
+        (0, import_embla_carousel_auto_height.default)({
+            destroyHeight: "fit",
+            active: true
+        })
+    ]), 2), emblaRef = _ref[0], emblaApi = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react73.useState)(initialStepId), 2), currentStep = _ref1[0], setCurrentStep = _ref1[1];
+    var nextStep = function() {
+        if (emblaApi) {
+            emblaApi.scrollNext();
+        }
+    };
+    var prevStep = function() {
+        if (emblaApi) {
+            emblaApi.scrollPrev();
+        }
+    };
+    return {
+        emblaRef: emblaRef,
+        emblaApi: emblaApi,
+        currentStep: currentStep,
+        nextStep: nextStep,
+        prevStep: prevStep
+    };
+};
+// components/hooks/useDialogSteps.ts
 var import_react74 = require("react");
+var useMultiStepDialog = function(initialStep, stepIds, setOpenDialog) {
+    var _ref = _sliced_to_array((0, import_react74.useState)(initialStep), 2), currentStep = _ref[0], setCurrentStep = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react74.useState)(null), 2), dialogHeight = _ref1[0], setDialogHeight = _ref1[1];
+    var visibleStepRef = (0, import_react74.useRef)(null);
+    (0, import_react74.useEffect)(function() {
+        if (visibleStepRef.current) {
+            setDialogHeight(visibleStepRef.current.offsetHeight);
+        }
+    }, [
+        currentStep,
+        setOpenDialog
+    ]);
+    var handleNext = function() {
+        var currentIndex = stepIds.indexOf(currentStep);
+        if (currentIndex < stepIds.length - 1) {
+            setTimeout(function() {
+                setCurrentStep(stepIds[currentIndex + 1]);
+            }, 100);
+        }
+    };
+    var handleBack = function() {
+        var currentIndex = stepIds.indexOf(currentStep);
+        if (currentIndex > 0) {
+            setTimeout(function() {
+                setCurrentStep(stepIds[currentIndex - 1]);
+            }, 100);
+        }
+    };
+    return {
+        currentStep: currentStep,
+        dialogHeight: dialogHeight,
+        visibleStepRef: visibleStepRef,
+        handleNext: handleNext,
+        handleBack: handleBack
+    };
+};
+// components/hooks/useWindowSize.ts
+var import_react75 = require("react");
 var useWindowSize = function() {
-    var _ref = _sliced_to_array((0, import_react74.useState)({
+    var _ref = _sliced_to_array((0, import_react75.useState)({
         width: void 0,
         height: void 0
     }), 2), windowSize = _ref[0], setWindowSize = _ref[1];
-    (0, import_react74.useEffect)(function() {
+    (0, import_react75.useEffect)(function() {
         var handleResize = function handleResize() {
             setWindowSize({
                 width: window.innerWidth,
@@ -10100,7 +10202,7 @@ var useWindowSize = function() {
     return windowSize;
 };
 // components/hooks/useFocusWithin.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 function containsRelatedTarget(event) {
     if (_instanceof(event.currentTarget, HTMLElement) && _instanceof(event.relatedTarget, HTMLElement)) {
         return event.currentTarget.contains(event.relatedTarget);
@@ -10109,9 +10211,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_react75.useRef)(null);
-    var _ref1 = _sliced_to_array((0, import_react75.useState)(false), 2), focused = _ref1[0], _setFocused = _ref1[1];
-    var focusedRef = (0, import_react75.useRef)(false);
+    var ref = (0, import_react76.useRef)(null);
+    var _ref1 = _sliced_to_array((0, import_react76.useState)(false), 2), focused = _ref1[0], _setFocused = _ref1[1];
+    var focusedRef = (0, import_react76.useRef)(false);
     var setFocused = function(value) {
         _setFocused(value);
         focusedRef.current = value;
@@ -10128,7 +10230,7 @@ function useFocusWithin() {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         }
     };
-    (0, import_react75.useEffect)(function() {
+    (0, import_react76.useEffect)(function() {
         if (ref.current) {
             ref.current.addEventListener("focusin", handleFocusIn);
             ref.current.addEventListener("focusout", handleFocusOut);
@@ -10149,7 +10251,7 @@ function useFocusWithin() {
     };
 }
 // components/hooks/useMediaQuery.ts
-var import_react76 = require("react");
+var import_react77 = require("react");
 function attachMediaListener(query, callback) {
     try {
         query.addEventListener("change", callback);
@@ -10176,9 +10278,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_react76.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)), 2), matches = _ref[0], setMatches = _ref[1];
-    var queryRef = (0, import_react76.useRef)();
-    (0, import_react76.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react77.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)), 2), matches = _ref[0], setMatches = _ref[1];
+    var queryRef = (0, import_react77.useRef)();
+    (0, import_react77.useEffect)(function() {
         if ("matchMedia" in window) {
             queryRef.current = window.matchMedia(query);
             setMatches(queryRef.current.matches);
@@ -10193,15 +10295,15 @@ function useMediaQuery(query, initialValue) {
     return matches;
 }
 // components/hooks/useScrollPosition.ts
-var import_react77 = require("react");
-// components/hooks/useTable.ts
 var import_react78 = require("react");
-// components/hooks/useTabs.ts
+// components/hooks/useTable.ts
 var import_react79 = require("react");
+// components/hooks/useTabs.ts
+var import_react80 = require("react");
 function useTabs() {
     var initialTab = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-    var _ref = _sliced_to_array((0, import_react79.useState)(initialTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
-    (0, import_react79.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react80.useState)(initialTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
+    (0, import_react80.useEffect)(function() {
         var handleHashChange = function() {
             var hash = window.location.hash.substring(1);
             setActiveTab(hash || initialTab);
@@ -10275,6 +10377,7 @@ function useTabs() {
     DestroyableCard: DestroyableCard,
     Dialog: Dialog,
     DialogBody: DialogBody,
+    DialogCarousel: DialogCarousel,
     DialogContent: DialogContent,
     DialogDescription: DialogDescription,
     DialogFooter: DialogFooter,
@@ -10402,9 +10505,11 @@ function useTabs() {
     toast: toast,
     useBreakpoint: useBreakpoint,
     useClipboard: useClipboard,
+    useDialogCarousel: useDialogCarousel,
     useFocusWithin: useFocusWithin,
     useIsomorphicEffect: useIsomorphicEffect,
     useMediaQuery: useMediaQuery,
+    useMultiStepDialog: useMultiStepDialog,
     useTabs: useTabs,
     useToast: useToast,
     useWindowSize: useWindowSize

package/dist/index.mjs

@@ -3636,7 +3636,7 @@ var DialogFooter = ({
     ...props
   }
 );
-var DialogSteps = ({
+var DialogCarousel = ({
   stepsApi,
   stepsRef,
   activeStep,
@@ -3676,6 +3676,39 @@ var DialogSteps = ({
     ))
   )));
 };
+var DialogSteps = ({
+  currentStep,
+  visibleStepRef,
+  children
+}) => {
+  const [dialogHeight, setDialogHeight] = React25.useState(null);
+  React25.useEffect(() => {
+    if (visibleStepRef.current) {
+      setDialogHeight(visibleStepRef.current.offsetHeight);
+      console.log("height is ", visibleStepRef.current.offsetHeight);
+    }
+  }, [currentStep, visibleStepRef]);
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    {
+      className: "hawa-relative hawa-overflow-clip",
+      style: {
+        height: dialogHeight || "fit-content",
+        transition: "height 0.2s"
+      }
+    },
+    React25.Children.map(children, (child, index) => /* @__PURE__ */ React25.createElement(
+      "div",
+      {
+        ref: currentStep === `step-${index + 1}` ? visibleStepRef : null,
+        className: cn(
+          currentStep === `step-${index + 1}` ? "hawa-visible hawa-block" : "hawa-invisible hawa-hidden"
+        )
+      },
+      child
+    ))
+  );
+};
 var DialogStep = ({
   id,
   children,
@@ -3695,9 +3728,10 @@ var DialogStep = ({
 var DialogBody = ({ children, className }) => {
   return /* @__PURE__ */ React25.createElement("div", { className: cn("hawa-py-6", className) }, children);
 };
-DialogStep.displayName = "DialogStep";
 DialogBody.displayName = "DialogBody";
+DialogStep.displayName = "DialogStep";
 DialogSteps.displayName = "DialogSteps";
+DialogCarousel.displayName = "DialogCarousel";
 DialogHeader.displayName = "DialogHeader";
 DialogFooter.displayName = "DialogFooter";
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
@@ -10104,19 +10138,79 @@ import { useEffect as useEffect24, useRef as useRef14, useState as useState38 }
 // components/hooks/useCarousel.ts
 import { useState as useState39, useRef as useRef15 } from "react";
 
-// components/hooks/useDialogSteps.ts
+// components/hooks/useDialogCarousel.ts
 import { useState as useState40 } from "react";
 import useEmblaCarousel2 from "embla-carousel-react";
 import AutoHeight from "embla-carousel-auto-height";
+var useDialogCarousel = (initialStepId, stepIds) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel2(
+    { loop: false, watchDrag: false },
+    [AutoHeight({ destroyHeight: "fit", active: true })]
+  );
+  const [currentStep, setCurrentStep] = useState40(initialStepId);
+  const nextStep = () => {
+    if (emblaApi) {
+      emblaApi.scrollNext();
+    }
+  };
+  const prevStep = () => {
+    if (emblaApi) {
+      emblaApi.scrollPrev();
+    }
+  };
+  return {
+    emblaRef,
+    emblaApi,
+    currentStep,
+    nextStep,
+    prevStep
+  };
+};
+
+// components/hooks/useDialogSteps.ts
+import { useState as useState41, useEffect as useEffect26, useRef as useRef16 } from "react";
+var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
+  const [currentStep, setCurrentStep] = useState41(initialStep);
+  const [dialogHeight, setDialogHeight] = useState41(null);
+  const visibleStepRef = useRef16(null);
+  useEffect26(() => {
+    if (visibleStepRef.current) {
+      setDialogHeight(visibleStepRef.current.offsetHeight);
+    }
+  }, [currentStep, setOpenDialog]);
+  const handleNext = () => {
+    const currentIndex = stepIds.indexOf(currentStep);
+    if (currentIndex < stepIds.length - 1) {
+      setTimeout(() => {
+        setCurrentStep(stepIds[currentIndex + 1]);
+      }, 100);
+    }
+  };
+  const handleBack = () => {
+    const currentIndex = stepIds.indexOf(currentStep);
+    if (currentIndex > 0) {
+      setTimeout(() => {
+        setCurrentStep(stepIds[currentIndex - 1]);
+      }, 100);
+    }
+  };
+  return {
+    currentStep,
+    dialogHeight,
+    visibleStepRef,
+    handleNext,
+    handleBack
+  };
+};
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect26, useState as useState41 } from "react";
+import { useEffect as useEffect27, useState as useState42 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState41({
+  const [windowSize, setWindowSize] = useState42({
     width: void 0,
     height: void 0
   });
-  useEffect26(() => {
+  useEffect27(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -10131,7 +10225,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef16, useState as useState42, useEffect as useEffect27 } from "react";
+import { useRef as useRef17, useState as useState43, useEffect as useEffect28 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -10142,9 +10236,9 @@ function useFocusWithin({
   onBlur,
   onFocus
 } = {}) {
-  const ref = useRef16(null);
-  const [focused, _setFocused] = useState42(false);
-  const focusedRef = useRef16(false);
+  const ref = useRef17(null);
+  const [focused, _setFocused] = useState43(false);
+  const focusedRef = useRef17(false);
   const setFocused = (value) => {
     _setFocused(value);
     focusedRef.current = value;
@@ -10161,7 +10255,7 @@ function useFocusWithin({
       onBlur?.(event);
     }
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -10176,7 +10270,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState43, useEffect as useEffect28, useRef as useRef17 } from "react";
+import { useState as useState44, useEffect as useEffect29, useRef as useRef18 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -10198,11 +10292,11 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState43(
+  const [matches, setMatches] = useState44(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
-  const queryRef = useRef17();
-  useEffect28(() => {
+  const queryRef = useRef18();
+  useEffect29(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -10217,16 +10311,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState44, useEffect as useEffect29 } from "react";
+import { useState as useState45, useEffect as useEffect30 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState45, useEffect as useEffect30 } from "react";
+import { useState as useState46, useEffect as useEffect31 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect31, useState as useState46 } from "react";
+import { useEffect as useEffect32, useState as useState47 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState46(initialTab);
-  useEffect31(() => {
+  const [activeTab, setActiveTab] = useState47(initialTab);
+  useEffect32(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);
@@ -10297,6 +10391,7 @@ export {
   DestroyableCard,
   Dialog,
   DialogBody,
+  DialogCarousel,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -10424,9 +10519,11 @@ export {
   toast,
   useBreakpoint,
   useClipboard,
+  useDialogCarousel,
   useFocusWithin,
   useIsomorphicEffect,
   useMediaQuery,
+  useMultiStepDialog,
   useTabs,
   useToast,
   useWindowSize

package/package.json

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