@sikka/hawa 0.19.6-next → 0.19.9-next

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { FC, ChangeEvent, InputHTMLAttributes, ReactNode, PropsWithChildren, RefObject, useEffect } from 'react';
+import React__default, { FC, ChangeEvent, FormEvent, InputHTMLAttributes, ReactNode, PropsWithChildren, RefObject, useEffect } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -48,6 +48,7 @@ type AdCardTypes = {
     handleCantHide?: () => void;
     handleClick?: (e: React__default.MouseEvent) => void;
     canHide: boolean;
+    className?: string;
 };
 declare const AdCard: FC<AdCardTypes>;
 
@@ -186,6 +187,7 @@ interface ItemCardTypes {
     clickableImageActionText?: string;
     /** The icon of the action button on the image of the card */
     clickableImageActionIcon?: any;
+    className?: string;
 }
 declare const ItemCard: FC<ItemCardTypes>;
 
@@ -210,6 +212,7 @@ type PinInputTypes = {
     getPins?: (pins: string[]) => void;
     /** The small red text under the input field to show validation or a hint.   */
     helperText?: any;
+    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
 };
 declare const PinInput: FC<PinInputTypes>;
 
@@ -292,7 +295,7 @@ type ColorPickerTypes = {
     /** The hex code for the color */
     color?: any;
     /** Fires everytime the color changes */
-    handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleChange?: (e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>) => void;
     colorPickerClassNames?: string;
     colorTextClassNames?: string;
     colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
@@ -437,6 +440,7 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimiti
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogCarouselContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     hideCloseButton?: boolean | undefined;
+    hidePrevButton?: boolean | undefined;
     persist?: boolean | undefined;
     onPrev?: (() => void) | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -1669,10 +1673,10 @@ type PricingPlansTypes = {
     plans: {
         id: any;
         direction: DirectionType;
-        features: [{
+        features: {
             included: boolean;
             text: string;
-        }];
+        }[];
         price: number;
         size: "small" | "medium" | "large";
         texts: {
@@ -1691,7 +1695,6 @@ type PricingPlansTypes = {
         label: string;
         value: string;
     }[];
-    onPlanClicked?: (e: any) => void;
     currentCycle: {
         label: string;
         value: string;
@@ -1700,6 +1703,7 @@ type PricingPlansTypes = {
         label: string;
         value: string;
     };
+    onPlanClicked?: (e: any) => void;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;
@@ -1840,6 +1844,7 @@ declare const useDialogCarousel: (options?: any) => {
     emblaApi: embla_carousel_react.EmblaCarouselType | undefined;
     nextStep: () => void;
     prevStep: () => void;
+    canScrollPrev: boolean;
 };
 
 declare const useMultiStepDialog: (initialStep: any, stepIds: any[], setOpenDialog: any) => {
@@ -1886,4 +1891,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppSidebarItemProps, 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, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, 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, Pagination, PasswordInput, PasswordStrengthIndicator, 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { FC, ChangeEvent, InputHTMLAttributes, ReactNode, PropsWithChildren, RefObject, useEffect } from 'react';
+import React__default, { FC, ChangeEvent, FormEvent, InputHTMLAttributes, ReactNode, PropsWithChildren, RefObject, useEffect } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -48,6 +48,7 @@ type AdCardTypes = {
     handleCantHide?: () => void;
     handleClick?: (e: React__default.MouseEvent) => void;
     canHide: boolean;
+    className?: string;
 };
 declare const AdCard: FC<AdCardTypes>;
 
@@ -186,6 +187,7 @@ interface ItemCardTypes {
     clickableImageActionText?: string;
     /** The icon of the action button on the image of the card */
     clickableImageActionIcon?: any;
+    className?: string;
 }
 declare const ItemCard: FC<ItemCardTypes>;
 
@@ -210,6 +212,7 @@ type PinInputTypes = {
     getPins?: (pins: string[]) => void;
     /** The small red text under the input field to show validation or a hint.   */
     helperText?: any;
+    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
 };
 declare const PinInput: FC<PinInputTypes>;
 
@@ -292,7 +295,7 @@ type ColorPickerTypes = {
     /** The hex code for the color */
     color?: any;
     /** Fires everytime the color changes */
-    handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleChange?: (e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>) => void;
     colorPickerClassNames?: string;
     colorTextClassNames?: string;
     colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
@@ -437,6 +440,7 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimiti
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogCarouselContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     hideCloseButton?: boolean | undefined;
+    hidePrevButton?: boolean | undefined;
     persist?: boolean | undefined;
     onPrev?: (() => void) | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -1669,10 +1673,10 @@ type PricingPlansTypes = {
     plans: {
         id: any;
         direction: DirectionType;
-        features: [{
+        features: {
             included: boolean;
             text: string;
-        }];
+        }[];
         price: number;
         size: "small" | "medium" | "large";
         texts: {
@@ -1691,7 +1695,6 @@ type PricingPlansTypes = {
         label: string;
         value: string;
     }[];
-    onPlanClicked?: (e: any) => void;
     currentCycle: {
         label: string;
         value: string;
@@ -1700,6 +1703,7 @@ type PricingPlansTypes = {
         label: string;
         value: string;
     };
+    onPlanClicked?: (e: any) => void;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;
@@ -1840,6 +1844,7 @@ declare const useDialogCarousel: (options?: any) => {
     emblaApi: embla_carousel_react.EmblaCarouselType | undefined;
     nextStep: () => void;
     prevStep: () => void;
+    canScrollPrev: boolean;
 };
 
 declare const useMultiStepDialog: (initialStep: any, stepIds: any[], setOpenDialog: any) => {
@@ -1886,4 +1891,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppSidebarItemProps, 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, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, 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, Pagination, PasswordInput, PasswordStrengthIndicator, 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -279,7 +279,10 @@ function cn(...inputs) {
 
 // components/elements/cards/AdCard.tsx
 var import_react2 = __toESM(require("react"));
-var AdCard = ({ orientation, ...props }) => {
+var AdCard = ({
+  orientation = "vertical",
+  ...props
+}) => {
   const adRef = (0, import_react2.useRef)(null);
   const [closed, setClosed] = (0, import_react2.useState)(false);
   let duration = 0;
@@ -311,8 +314,7 @@ var AdCard = ({ orientation, ...props }) => {
   return /* @__PURE__ */ import_react2.default.createElement("div", { ref: adRef }, /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
-      className: cn(cardStyles[orientation], ""),
-      ...props,
+      className: cn(cardStyles[orientation], props.className),
       onClick: props.handleClick
     },
     /* @__PURE__ */ import_react2.default.createElement("div", { className: "hawa-flex hawa-aspect-square hawa-w-full  hawa-max-w-fit  hawa-items-start " }, /* @__PURE__ */ import_react2.default.createElement(
@@ -935,7 +937,7 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 )));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, slug, ...props }, ref) => {
+var DropdownMenuItem = React10.forwardRef(({ className, inset, badged, slug, ...props }, ref) => {
   return /* @__PURE__ */ React10.createElement("a", { href: slug }, /* @__PURE__ */ React10.createElement(
     DropdownMenuPrimitive.Item,
     {
@@ -952,7 +954,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, slug, ...props },
     /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
     props.end && props.end,
     !props.end && props.shortcut && /* @__PURE__ */ React10.createElement(DropdownMenuShortcut, null, props.shortcut),
-    !props.end && props.badged && /* @__PURE__ */ React10.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-bg-red-500 hawa-rounded-full" })
+    !props.end && badged && /* @__PURE__ */ React10.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-bg-red-500 hawa-rounded-full" })
   ));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -1202,7 +1204,7 @@ var DropdownMenuRadio = (props) => {
       value: props.value,
       onValueChange: props.onValueChange
     },
-    props.options.map((opt) => /* @__PURE__ */ React10.createElement(DropdownMenuRadioItem, { value: opt.value }, opt.label))
+    props.options.map((opt, i) => /* @__PURE__ */ React10.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
   )));
 };
 
@@ -1263,15 +1265,15 @@ var ItemCard = ({
       className: cn(
         defaultStyle,
         props.onCardClick && " hover:hawa-shadow-lg hawa-cursor-pointer",
-        orientationStyles[orientation]
+        orientationStyles[orientation],
+        props.className
       ),
       onClick: (e) => {
         e.stopPropagation();
         if (props.onCardClick) {
           props.onCardClick(e);
         }
-      },
-      ...props
+      }
     },
     cardImage && /* @__PURE__ */ import_react8.default.createElement("div", { className: "hawa-group hawa-relative hawa-overflow-clip" }, /* @__PURE__ */ import_react8.default.createElement(
       "img",
@@ -1344,6 +1346,7 @@ var PinInput = ({
   digits,
   width = "normal",
   getPins,
+  inputProps,
   ...props
 }) => {
   const [pin, setPin] = (0, import_react10.useState)(Array.from(Array(digits)));
@@ -1402,7 +1405,7 @@ var PinInput = ({
         onChange: (e) => handleChange(e, index),
         onKeyDown: (e) => handleKeyDown(e, index),
         onFocus: (e) => e.target.select(),
-        ...props
+        ...inputProps
       }
     ))
   ), /* @__PURE__ */ import_react10.default.createElement(
@@ -3846,16 +3849,11 @@ var ColorPicker = ({
     let inputColor = inputElement.value;
     if (inputColor[0] !== "#") {
       inputColor = `#${inputColor}`;
-      inputElement.value = inputColor;
     }
     const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, "");
-    if (sanitizedInput !== inputColor) {
-      inputElement.value = sanitizedInput;
-    }
     setSelectedColor(sanitizedInput);
     if (props.handleChange) {
-      const event = new Event("input", { bubbles: true });
-      inputElement.dispatchEvent(event);
+      props.handleChange(e);
     }
   };
   return /* @__PURE__ */ import_react15.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ import_react15.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react15.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react15.default.createElement(
@@ -3887,7 +3885,6 @@ var ColorPicker = ({
     {
       maxLength: 7,
       type: "text",
-      defaultValue: selectedColor || "#",
       onInput: handleTextInputChange,
       value: selectedColor,
       className: cn(
@@ -4100,7 +4097,15 @@ var DialogContent = React26.forwardRef(({ className, children, persist, hideClos
   )
 )));
 var DialogCarouselContent = React26.forwardRef(
-  ({ className, children, onPrev, persist, hideCloseButton, ...props }, ref) => /* @__PURE__ */ React26.createElement(DialogPortal, null, /* @__PURE__ */ React26.createElement(DialogOverlay, null), /* @__PURE__ */ React26.createElement(
+  ({
+    className,
+    children,
+    onPrev,
+    persist,
+    hideCloseButton,
+    hidePrevButton,
+    ...props
+  }, ref) => /* @__PURE__ */ React26.createElement(DialogPortal, null, /* @__PURE__ */ React26.createElement(DialogOverlay, null), /* @__PURE__ */ React26.createElement(
     DialogPrimitive.Content,
     {
       onPointerDownOutside: (e) => {
@@ -4124,7 +4129,7 @@ var DialogCarouselContent = React26.forwardRef(
           onPrev ? "hawa-justify-between" : "hawa-justify-end"
         )
       },
-      onPrev && /* @__PURE__ */ React26.createElement(
+      hidePrevButton ? /* @__PURE__ */ React26.createElement("div", null) : /* @__PURE__ */ React26.createElement(
         "div",
         {
           onClick: onPrev,
@@ -4656,7 +4661,7 @@ var FileUploader = ({ handleFile, className }) => {
     const fileUploaded = event.target.files[0];
     handleFile(fileUploaded);
   };
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className }, /* @__PURE__ */ import_react17.default.createElement("button", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ import_react17.default.createElement(
     "input",
     {
       type: "file",
@@ -4971,7 +4976,10 @@ var CodeBlock = ({
         {
           open: clipboard.copied,
           side: "left",
-          content: /* @__PURE__ */ import_react21.default.createElement("div", null, "Copied!")
+          content: /* @__PURE__ */ import_react21.default.createElement("div", null, "Copied!"),
+          triggerProps: {
+            asChild: true
+          }
         },
         /* @__PURE__ */ import_react21.default.createElement(
           Button,
@@ -5736,7 +5744,14 @@ var Carousel = (props) => {
   const length = import_react26.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full hawa-flex" }, items == null ? void 0 : items.map((item) => /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full hawa-justify-center hawa-flex  hawa-items-center  hawa-min-w-0 hawa-flex-[0_0_100%]" }, item))))), /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "hawa-h-full hawa-flex" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react26.default.createElement(
+    "div",
+    {
+      key: i,
+      className: "hawa-h-full hawa-justify-center hawa-flex  hawa-items-center  hawa-min-w-0 hawa-flex-[0_0_100%]"
+    },
+    item
+  ))))), /* @__PURE__ */ import_react26.default.createElement(
     Dots,
     {
       itemsLength: length,
@@ -7366,7 +7381,7 @@ ProgressCircle.displayName = "ProgressCircle";
 var React60 = __toESM(require("react"));
 var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"));
 var import_class_variance_authority4 = require("class-variance-authority");
-var NavigationMenuRoot = React60.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React60.createElement(
+var NavigationMenuRoot = React60.forwardRef(({ className, children, viewportClassNames, ...props }, ref) => /* @__PURE__ */ React60.createElement(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -7378,7 +7393,7 @@ var NavigationMenuRoot = React60.forwardRef(({ className, children, ...props },
     ...props
   },
   children,
-  /* @__PURE__ */ React60.createElement(NavigationMenuViewport, { className: props.viewportClassNames })
+  /* @__PURE__ */ React60.createElement(NavigationMenuViewport, { className: viewportClassNames })
 ));
 NavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;
 var NavigationMenuList = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React60.createElement(
@@ -7477,14 +7492,17 @@ var NavigationMenuIndicator = React60.forwardRef(({ className, ...props }, ref)
   /* @__PURE__ */ React60.createElement("div", { className: "hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md" })
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-var NavigationMenu = (props) => {
+var NavigationMenu = ({
+  viewportClassNames,
+  ...props
+}) => {
   return /* @__PURE__ */ React60.createElement(
     NavigationMenuRoot,
     {
       dir: props.direction,
       delayDuration: 0,
       className: props.rootClassNames,
-      viewportClassNames: props.viewportClassNames
+      viewportClassNames
     },
     /* @__PURE__ */ React60.createElement(NavigationMenuList, null, props.items.map((item, i) => /* @__PURE__ */ React60.createElement(NavigationMenuItem, { key: i }, item.content ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(NavigationMenuTrigger, null, item.trigger), /* @__PURE__ */ React60.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React60.createElement(
       NavigationMenuLink,
@@ -7945,7 +7963,7 @@ var Stats = ({
     muted: "hawa-text-muted-foreground"
   };
   return /* @__PURE__ */ import_react39.default.createElement(Card, { ...props, clickable: Boolean(props.onClick) }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between hawa-p-4 hawa-items-center" }, /* @__PURE__ */ import_react39.default.createElement(CardTitle, { className: "hawa-text-sm hawa-font-medium" }, label), icon && /* @__PURE__ */ import_react39.default.createElement("span", null, icon)), /* @__PURE__ */ import_react39.default.createElement(CardContent, { className: "hawa-transition-all" }, isLoading ? /* @__PURE__ */ import_react39.default.createElement(Skeleton, { className: "hawa-h-8 hawa-w-3/4" }) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-text-2xl hawa-font-bold" }, number), helperText && /* @__PURE__ */ import_react39.default.createElement(
-    "p",
+    "div",
     {
       className: cn(
         "hawa-my-0 hawa-text-xs  hawa-transition-all hawa-text-start",
@@ -8206,9 +8224,10 @@ var Navbar = ({
         }
       },
       logo
-    )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react41.default.createElement(
+    )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ import_react41.default.createElement(
       "div",
       {
+        key: i,
         onClick: item.action,
         className: "hawa-p-1.5 hawa-px-2 hawa-text-sm hawa-text-center hawa-rounded hawa-text-white hover:hawa-text-black hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
       },
@@ -8277,9 +8296,10 @@ var Navbar = ({
           zIndex: -100
         }
       },
-      (_b = props.menuItems) == null ? void 0 : _b.map((item) => /* @__PURE__ */ import_react41.default.createElement(
+      (_b = props.menuItems) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ import_react41.default.createElement(
         "div",
         {
+          key: i,
           onClick: item.action,
           className: "hawa-text-black hawa-p-2 hawa-px-10 hawa-text-center hawa-rounded hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
         },
@@ -8565,7 +8585,8 @@ var AppLayout = ({
         {
           side: "left",
           delayDuration: 500,
-          content: keepOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
+          content: keepOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
+          triggerProps: { asChild: true }
         },
         /* @__PURE__ */ import_react42.default.createElement(
           Button,
@@ -8960,6 +8981,7 @@ var AppTabs = ({ tabs, ...props }) => {
     return /* @__PURE__ */ import_react44.default.createElement(
       AppSingleTab,
       {
+        key: index,
         tab,
         onClick: () => setSelectedIndex(index),
         isSelected: selected
@@ -8971,6 +8993,7 @@ var AppSingleTab = ({ tab, ...props }) => {
   return /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
+      key: props.key,
       onClick: props.onClick,
       className: cn(
         "hawa-p-4 hawa-py-2 hawa-flex hawa-flex-row hawa-gap-2 hawa-translate-y-[1.1px] hawa-text-sm hawa-rounded-t hawa-transition-all hawa-select-none hawa-z-10 ",
@@ -10928,9 +10951,10 @@ var PricingPlans = (props) => {
         onPlanClicked: () => {
           if (props.onPlanClicked) {
             let clickedData = {
-              plan: plan.id,
+              // plan: plan.id,
               currency: props.currentCurrency,
-              cycle: props.currentCycle
+              cycle: props.currentCycle,
+              ...plan
             };
             props.onPlanClicked(clickedData);
           }
@@ -11136,6 +11160,7 @@ var import_react73 = require("react");
 var import_react74 = require("react");
 
 // components/hooks/useDialogCarousel.ts
+var import_react75 = require("react");
 var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var import_embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
 var useDialogCarousel = (options) => {
@@ -11143,6 +11168,12 @@ var useDialogCarousel = (options) => {
     { loop: false, watchDrag: false, startIndex: 0, ...options },
     [(0, import_embla_carousel_auto_height.default)({ destroyHeight: "fit", active: true })]
   );
+  const [canScrollPrev, setCanScrollPrev] = (0, import_react75.useState)(false);
+  const checkCanScrollPrev = () => {
+    if (emblaApi) {
+      setCanScrollPrev(emblaApi.canScrollPrev());
+    }
+  };
   const nextStep = () => {
     if (emblaApi) {
       console.log("going to NEXT \u{1F449}");
@@ -11155,22 +11186,29 @@ var useDialogCarousel = (options) => {
       emblaApi.scrollPrev();
     }
   };
+  (0, import_react75.useEffect)(() => {
+    checkCanScrollPrev();
+    emblaApi && emblaApi.on("select", checkCanScrollPrev);
+    return () => {
+      emblaApi && emblaApi.off("select", checkCanScrollPrev);
+    };
+  }, [emblaApi]);
   return {
     emblaRef,
     emblaApi,
-    // currentStep,
     nextStep,
-    prevStep
+    prevStep,
+    canScrollPrev
   };
 };
 
 // components/hooks/useDialogSteps.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
-  const [currentStep, setCurrentStep] = (0, import_react75.useState)(initialStep);
-  const [dialogHeight, setDialogHeight] = (0, import_react75.useState)(null);
-  const visibleStepRef = (0, import_react75.useRef)(null);
-  (0, import_react75.useEffect)(() => {
+  const [currentStep, setCurrentStep] = (0, import_react76.useState)(initialStep);
+  const [dialogHeight, setDialogHeight] = (0, import_react76.useState)(null);
+  const visibleStepRef = (0, import_react76.useRef)(null);
+  (0, import_react76.useEffect)(() => {
     if (visibleStepRef.current) {
       setDialogHeight(visibleStepRef.current.offsetHeight);
     }
@@ -11201,13 +11239,13 @@ var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
 };
 
 // components/hooks/useWindowSize.ts
-var import_react76 = require("react");
+var import_react77 = require("react");
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = (0, import_react76.useState)({
+  const [windowSize, setWindowSize] = (0, import_react77.useState)({
     width: void 0,
     height: void 0
   });
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -11222,7 +11260,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-var import_react77 = require("react");
+var import_react78 = require("react");
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -11233,9 +11271,9 @@ function useFocusWithin({
   onBlur,
   onFocus
 } = {}) {
-  const ref = (0, import_react77.useRef)(null);
-  const [focused, _setFocused] = (0, import_react77.useState)(false);
-  const focusedRef = (0, import_react77.useRef)(false);
+  const ref = (0, import_react78.useRef)(null);
+  const [focused, _setFocused] = (0, import_react78.useState)(false);
+  const focusedRef = (0, import_react78.useRef)(false);
   const setFocused = (value) => {
     _setFocused(value);
     focusedRef.current = value;
@@ -11252,7 +11290,7 @@ function useFocusWithin({
       onBlur == null ? void 0 : onBlur(event);
     }
   };
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -11268,7 +11306,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-var import_react78 = require("react");
+var import_react79 = require("react");
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -11290,11 +11328,11 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = (0, import_react78.useState)(
+  const [matches, setMatches] = (0, import_react79.useState)(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
-  const queryRef = (0, import_react78.useRef)();
-  (0, import_react78.useEffect)(() => {
+  const queryRef = (0, import_react79.useRef)();
+  (0, import_react79.useEffect)(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -11309,16 +11347,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-var import_react79 = require("react");
+var import_react80 = require("react");
 
 // components/hooks/useTable.ts
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // components/hooks/useTabs.ts
-var import_react81 = require("react");
+var import_react82 = require("react");
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = (0, import_react81.useState)(initialTab);
-  (0, import_react81.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react82.useState)(initialTab);
+  (0, import_react82.useEffect)(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);

package/dist/index.mjs

@@ -46,7 +46,10 @@ function cn(...inputs) {
 
 // components/elements/cards/AdCard.tsx
 import React3, { useState as useState2, useEffect, useRef } from "react";
-var AdCard = ({ orientation, ...props }) => {
+var AdCard = ({
+  orientation = "vertical",
+  ...props
+}) => {
   const adRef = useRef(null);
   const [closed, setClosed] = useState2(false);
   let duration = 0;
@@ -78,8 +81,7 @@ var AdCard = ({ orientation, ...props }) => {
   return /* @__PURE__ */ React3.createElement("div", { ref: adRef }, /* @__PURE__ */ React3.createElement(
     "div",
     {
-      className: cn(cardStyles[orientation], ""),
-      ...props,
+      className: cn(cardStyles[orientation], props.className),
       onClick: props.handleClick
     },
     /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-aspect-square hawa-w-full  hawa-max-w-fit  hawa-items-start " }, /* @__PURE__ */ React3.createElement(
@@ -702,7 +704,7 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 )));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, slug, ...props }, ref) => {
+var DropdownMenuItem = React10.forwardRef(({ className, inset, badged, slug, ...props }, ref) => {
   return /* @__PURE__ */ React10.createElement("a", { href: slug }, /* @__PURE__ */ React10.createElement(
     DropdownMenuPrimitive.Item,
     {
@@ -719,7 +721,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, slug, ...props },
     /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
     props.end && props.end,
     !props.end && props.shortcut && /* @__PURE__ */ React10.createElement(DropdownMenuShortcut, null, props.shortcut),
-    !props.end && props.badged && /* @__PURE__ */ React10.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-bg-red-500 hawa-rounded-full" })
+    !props.end && badged && /* @__PURE__ */ React10.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-bg-red-500 hawa-rounded-full" })
   ));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -969,7 +971,7 @@ var DropdownMenuRadio = (props) => {
       value: props.value,
       onValueChange: props.onValueChange
     },
-    props.options.map((opt) => /* @__PURE__ */ React10.createElement(DropdownMenuRadioItem, { value: opt.value }, opt.label))
+    props.options.map((opt, i) => /* @__PURE__ */ React10.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
   )));
 };
 
@@ -1030,15 +1032,15 @@ var ItemCard = ({
       className: cn(
         defaultStyle,
         props.onCardClick && " hover:hawa-shadow-lg hawa-cursor-pointer",
-        orientationStyles[orientation]
+        orientationStyles[orientation],
+        props.className
       ),
       onClick: (e) => {
         e.stopPropagation();
         if (props.onCardClick) {
           props.onCardClick(e);
         }
-      },
-      ...props
+      }
     },
     cardImage && /* @__PURE__ */ React12.createElement("div", { className: "hawa-group hawa-relative hawa-overflow-clip" }, /* @__PURE__ */ React12.createElement(
       "img",
@@ -1111,6 +1113,7 @@ var PinInput = ({
   digits,
   width = "normal",
   getPins,
+  inputProps,
   ...props
 }) => {
   const [pin, setPin] = useState4(Array.from(Array(digits)));
@@ -1169,7 +1172,7 @@ var PinInput = ({
         onChange: (e) => handleChange(e, index),
         onKeyDown: (e) => handleKeyDown(e, index),
         onFocus: (e) => e.target.select(),
-        ...props
+        ...inputProps
       }
     ))
   ), /* @__PURE__ */ React14.createElement(
@@ -3616,16 +3619,11 @@ var ColorPicker = ({
     let inputColor = inputElement.value;
     if (inputColor[0] !== "#") {
       inputColor = `#${inputColor}`;
-      inputElement.value = inputColor;
     }
     const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, "");
-    if (sanitizedInput !== inputColor) {
-      inputElement.value = sanitizedInput;
-    }
     setSelectedColor(sanitizedInput);
     if (props.handleChange) {
-      const event = new Event("input", { bubbles: true });
-      inputElement.dispatchEvent(event);
+      props.handleChange(e);
     }
   };
   return /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React24.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React24.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React24.createElement(
@@ -3657,7 +3655,6 @@ var ColorPicker = ({
     {
       maxLength: 7,
       type: "text",
-      defaultValue: selectedColor || "#",
       onInput: handleTextInputChange,
       value: selectedColor,
       className: cn(
@@ -3870,7 +3867,15 @@ var DialogContent = React26.forwardRef(({ className, children, persist, hideClos
   )
 )));
 var DialogCarouselContent = React26.forwardRef(
-  ({ className, children, onPrev, persist, hideCloseButton, ...props }, ref) => /* @__PURE__ */ React26.createElement(DialogPortal, null, /* @__PURE__ */ React26.createElement(DialogOverlay, null), /* @__PURE__ */ React26.createElement(
+  ({
+    className,
+    children,
+    onPrev,
+    persist,
+    hideCloseButton,
+    hidePrevButton,
+    ...props
+  }, ref) => /* @__PURE__ */ React26.createElement(DialogPortal, null, /* @__PURE__ */ React26.createElement(DialogOverlay, null), /* @__PURE__ */ React26.createElement(
     DialogPrimitive.Content,
     {
       onPointerDownOutside: (e) => {
@@ -3894,7 +3899,7 @@ var DialogCarouselContent = React26.forwardRef(
           onPrev ? "hawa-justify-between" : "hawa-justify-end"
         )
       },
-      onPrev && /* @__PURE__ */ React26.createElement(
+      hidePrevButton ? /* @__PURE__ */ React26.createElement("div", null) : /* @__PURE__ */ React26.createElement(
         "div",
         {
           onClick: onPrev,
@@ -4426,7 +4431,7 @@ var FileUploader = ({ handleFile, className }) => {
     const fileUploaded = event.target.files[0];
     handleFile(fileUploaded);
   };
-  return /* @__PURE__ */ React30.createElement("div", { className }, /* @__PURE__ */ React30.createElement("button", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React30.createElement("div", { className }, /* @__PURE__ */ React30.createElement("div", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ React30.createElement(
     "input",
     {
       type: "file",
@@ -4741,7 +4746,10 @@ var CodeBlock = ({
         {
           open: clipboard.copied,
           side: "left",
-          content: /* @__PURE__ */ React34.createElement("div", null, "Copied!")
+          content: /* @__PURE__ */ React34.createElement("div", null, "Copied!"),
+          triggerProps: {
+            asChild: true
+          }
         },
         /* @__PURE__ */ React34.createElement(
           Button,
@@ -5506,7 +5514,14 @@ var Carousel = (props) => {
   const length = React41.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ React41.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full hawa-flex" }, items == null ? void 0 : items.map((item) => /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full hawa-justify-center hawa-flex  hawa-items-center  hawa-min-w-0 hawa-flex-[0_0_100%]" }, item))))), /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React41.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ React41.createElement("div", { className: "hawa-h-full hawa-flex" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ React41.createElement(
+    "div",
+    {
+      key: i,
+      className: "hawa-h-full hawa-justify-center hawa-flex  hawa-items-center  hawa-min-w-0 hawa-flex-[0_0_100%]"
+    },
+    item
+  ))))), /* @__PURE__ */ React41.createElement(
     Dots,
     {
       itemsLength: length,
@@ -7148,7 +7163,7 @@ ProgressCircle.displayName = "ProgressCircle";
 import * as React60 from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva as cva4 } from "class-variance-authority";
-var NavigationMenuRoot = React60.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React60.createElement(
+var NavigationMenuRoot = React60.forwardRef(({ className, children, viewportClassNames, ...props }, ref) => /* @__PURE__ */ React60.createElement(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -7160,7 +7175,7 @@ var NavigationMenuRoot = React60.forwardRef(({ className, children, ...props },
     ...props
   },
   children,
-  /* @__PURE__ */ React60.createElement(NavigationMenuViewport, { className: props.viewportClassNames })
+  /* @__PURE__ */ React60.createElement(NavigationMenuViewport, { className: viewportClassNames })
 ));
 NavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;
 var NavigationMenuList = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React60.createElement(
@@ -7259,14 +7274,17 @@ var NavigationMenuIndicator = React60.forwardRef(({ className, ...props }, ref)
   /* @__PURE__ */ React60.createElement("div", { className: "hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md" })
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-var NavigationMenu = (props) => {
+var NavigationMenu = ({
+  viewportClassNames,
+  ...props
+}) => {
   return /* @__PURE__ */ React60.createElement(
     NavigationMenuRoot,
     {
       dir: props.direction,
       delayDuration: 0,
       className: props.rootClassNames,
-      viewportClassNames: props.viewportClassNames
+      viewportClassNames
     },
     /* @__PURE__ */ React60.createElement(NavigationMenuList, null, props.items.map((item, i) => /* @__PURE__ */ React60.createElement(NavigationMenuItem, { key: i }, item.content ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(NavigationMenuTrigger, null, item.trigger), /* @__PURE__ */ React60.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React60.createElement(
       NavigationMenuLink,
@@ -7729,7 +7747,7 @@ var Stats = ({
     muted: "hawa-text-muted-foreground"
   };
   return /* @__PURE__ */ React64.createElement(Card, { ...props, clickable: Boolean(props.onClick) }, /* @__PURE__ */ React64.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between hawa-p-4 hawa-items-center" }, /* @__PURE__ */ React64.createElement(CardTitle, { className: "hawa-text-sm hawa-font-medium" }, label), icon && /* @__PURE__ */ React64.createElement("span", null, icon)), /* @__PURE__ */ React64.createElement(CardContent, { className: "hawa-transition-all" }, isLoading ? /* @__PURE__ */ React64.createElement(Skeleton, { className: "hawa-h-8 hawa-w-3/4" }) : /* @__PURE__ */ React64.createElement("div", { className: "hawa-text-2xl hawa-font-bold" }, number), helperText && /* @__PURE__ */ React64.createElement(
-    "p",
+    "div",
     {
       className: cn(
         "hawa-my-0 hawa-text-xs  hawa-transition-all hawa-text-start",
@@ -7990,9 +8008,10 @@ var Navbar = ({
         }
       },
       logo
-    )), /* @__PURE__ */ React67.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React67.createElement(
+    )), /* @__PURE__ */ React67.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ React67.createElement(
       "div",
       {
+        key: i,
         onClick: item.action,
         className: "hawa-p-1.5 hawa-px-2 hawa-text-sm hawa-text-center hawa-rounded hawa-text-white hover:hawa-text-black hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
       },
@@ -8061,9 +8080,10 @@ var Navbar = ({
           zIndex: -100
         }
       },
-      (_b = props.menuItems) == null ? void 0 : _b.map((item) => /* @__PURE__ */ React67.createElement(
+      (_b = props.menuItems) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ React67.createElement(
         "div",
         {
+          key: i,
           onClick: item.action,
           className: "hawa-text-black hawa-p-2 hawa-px-10 hawa-text-center hawa-rounded hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
         },
@@ -8349,7 +8369,8 @@ var AppLayout = ({
         {
           side: "left",
           delayDuration: 500,
-          content: keepOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
+          content: keepOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
+          triggerProps: { asChild: true }
         },
         /* @__PURE__ */ React68.createElement(
           Button,
@@ -8744,6 +8765,7 @@ var AppTabs = ({ tabs, ...props }) => {
     return /* @__PURE__ */ React71.createElement(
       AppSingleTab,
       {
+        key: index,
         tab,
         onClick: () => setSelectedIndex(index),
         isSelected: selected
@@ -8755,6 +8777,7 @@ var AppSingleTab = ({ tab, ...props }) => {
   return /* @__PURE__ */ React71.createElement(
     "div",
     {
+      key: props.key,
       onClick: props.onClick,
       className: cn(
         "hawa-p-4 hawa-py-2 hawa-flex hawa-flex-row hawa-gap-2 hawa-translate-y-[1.1px] hawa-text-sm hawa-rounded-t hawa-transition-all hawa-select-none hawa-z-10 ",
@@ -10712,9 +10735,10 @@ var PricingPlans = (props) => {
         onPlanClicked: () => {
           if (props.onPlanClicked) {
             let clickedData = {
-              plan: plan.id,
+              // plan: plan.id,
               currency: props.currentCurrency,
-              cycle: props.currentCycle
+              cycle: props.currentCycle,
+              ...plan
             };
             props.onPlanClicked(clickedData);
           }
@@ -10920,6 +10944,7 @@ import { useEffect as useEffect25, useRef as useRef14, useState as useState39 }
 import { useState as useState40, useRef as useRef15 } from "react";
 
 // components/hooks/useDialogCarousel.ts
+import { useEffect as useEffect26, useState as useState41 } from "react";
 import useEmblaCarousel2 from "embla-carousel-react";
 import AutoHeight from "embla-carousel-auto-height";
 var useDialogCarousel = (options) => {
@@ -10927,6 +10952,12 @@ var useDialogCarousel = (options) => {
     { loop: false, watchDrag: false, startIndex: 0, ...options },
     [AutoHeight({ destroyHeight: "fit", active: true })]
   );
+  const [canScrollPrev, setCanScrollPrev] = useState41(false);
+  const checkCanScrollPrev = () => {
+    if (emblaApi) {
+      setCanScrollPrev(emblaApi.canScrollPrev());
+    }
+  };
   const nextStep = () => {
     if (emblaApi) {
       console.log("going to NEXT \u{1F449}");
@@ -10939,22 +10970,29 @@ var useDialogCarousel = (options) => {
       emblaApi.scrollPrev();
     }
   };
+  useEffect26(() => {
+    checkCanScrollPrev();
+    emblaApi && emblaApi.on("select", checkCanScrollPrev);
+    return () => {
+      emblaApi && emblaApi.off("select", checkCanScrollPrev);
+    };
+  }, [emblaApi]);
   return {
     emblaRef,
     emblaApi,
-    // currentStep,
     nextStep,
-    prevStep
+    prevStep,
+    canScrollPrev
   };
 };
 
 // components/hooks/useDialogSteps.ts
-import { useState as useState41, useEffect as useEffect26, useRef as useRef16 } from "react";
+import { useState as useState42, useEffect as useEffect27, useRef as useRef16 } from "react";
 var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
-  const [currentStep, setCurrentStep] = useState41(initialStep);
-  const [dialogHeight, setDialogHeight] = useState41(null);
+  const [currentStep, setCurrentStep] = useState42(initialStep);
+  const [dialogHeight, setDialogHeight] = useState42(null);
   const visibleStepRef = useRef16(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (visibleStepRef.current) {
       setDialogHeight(visibleStepRef.current.offsetHeight);
     }
@@ -10985,13 +11023,13 @@ var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
 };
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect27, useState as useState42 } from "react";
+import { useEffect as useEffect28, useState as useState43 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState42({
+  const [windowSize, setWindowSize] = useState43({
     width: void 0,
     height: void 0
   });
-  useEffect27(() => {
+  useEffect28(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -11006,7 +11044,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef17, useState as useState43, useEffect as useEffect28 } from "react";
+import { useRef as useRef17, useState as useState44, useEffect as useEffect29 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -11018,7 +11056,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef17(null);
-  const [focused, _setFocused] = useState43(false);
+  const [focused, _setFocused] = useState44(false);
   const focusedRef = useRef17(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -11036,7 +11074,7 @@ function useFocusWithin({
       onBlur == null ? void 0 : onBlur(event);
     }
   };
-  useEffect28(() => {
+  useEffect29(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -11052,7 +11090,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState44, useEffect as useEffect29, useRef as useRef18 } from "react";
+import { useState as useState45, useEffect as useEffect30, useRef as useRef18 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -11074,11 +11112,11 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState44(
+  const [matches, setMatches] = useState45(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef18();
-  useEffect29(() => {
+  useEffect30(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -11093,16 +11131,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState45, useEffect as useEffect30 } from "react";
+import { useState as useState46, useEffect as useEffect31 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState46, useEffect as useEffect31 } from "react";
+import { useState as useState47, useEffect as useEffect32 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect32, useState as useState47 } from "react";
+import { useEffect as useEffect33, useState as useState48 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState47(initialTab);
-  useEffect32(() => {
+  const [activeTab, setActiveTab] = useState48(initialTab);
+  useEffect33(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.19.6-next",
+  "version": "0.19.9-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -71,20 +71,20 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-table": "^8.10.7",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/node": "^20.9.4",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "embla-carousel-auto-height": "^8.0.0-rc14",
     "embla-carousel-react": "^8.0.0-rc14",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^14.0.2",
-    "libphonenumber-js": "^1.10.49",
-    "next": "^14.0.2",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^14.0.3",
+    "libphonenumber-js": "^1.10.50",
+    "next": "^14.0.3",
     "next-themes": "^0.2.1",
-    "prism-react-renderer": "^2.1.0",
+    "prism-react-renderer": "^2.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
@@ -96,7 +96,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.23.3",
-    "@sikka/alam": "^0.0.2",
+    "@sikka/alam": "^0.0.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
@@ -108,8 +108,8 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.5.3",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@types/jest": "^29.5.8",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
     "autoprefixer": "^10.4.16",
     "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
@@ -118,12 +118,12 @@
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "recharts": "^2.9.3",
+    "recharts": "^2.10.1",
     "storybook": "^7.5.3",
     "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.3.5",
     "tailwindcss-animate": "^1.0.7",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2"
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.2"
   }
 }