@sikka/hawa 0.13.15-next → 0.13.17-next

package/dist/index.css

@@ -890,6 +890,9 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.-hawa-mt-4 {
+  margin-top: -1rem;
+}
 .hawa--mt-1 {
   margin-top: -0.25rem;
 }
@@ -2049,19 +2052,36 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hawa-from-green-500 {
+  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hawa-from-pink-500 {
   --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hawa-from-pink-700 {
+  --tw-gradient-from: #be185d var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(190 24 93 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hawa-via-blue-500 {
   --tw-gradient-to: rgb(59 130 246 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+.hawa-via-blue-700 {
+  --tw-gradient-to: rgb(29 78 216 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
 .hawa-via-red-500 {
   --tw-gradient-to: rgb(239 68 68 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+.hawa-to-purple-500 {
+  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
+}
 .hawa-to-purple-600 {
   --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
 }
@@ -2071,6 +2091,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-to-yellow-500 {
   --tw-gradient-to: #eab308 var(--tw-gradient-to-position);
 }
+.hawa-to-yellow-600 {
+  --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
+}
 .hawa-bg-cover {
   background-size: cover;
 }
@@ -2397,10 +2420,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
-.hawa-text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
 .hawa-text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -2449,10 +2468,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
-.hawa-text-green-700 {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
 .hawa-text-helper-color {
   color: hsl(var(--helper-text));
 }
@@ -2504,10 +2519,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.hawa-text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
 .hawa-text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -2527,10 +2538,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(202 138 4 / var(--tw-text-opacity));
 }
-.hawa-text-yellow-700 {
-  --tw-text-opacity: 1;
-  color: rgb(161 98 7 / var(--tw-text-opacity));
-}
 .hawa-underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -2850,10 +2857,6 @@ body {
 .hover\:hawa-bg-accent:hover {
   background-color: hsl(var(--accent));
 }
-.hover\:hawa-bg-blue-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
@@ -2869,10 +2872,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
-.hover\:hawa-bg-green-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-muted:hover {
   background-color: hsl(var(--muted));
 }
@@ -2894,20 +2893,12 @@ body {
 .hover\:hawa-bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
-.hover\:hawa-bg-red-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-secondary:hover {
   background-color: hsl(var(--secondary));
 }
 .hover\:hawa-bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
-.hover\:hawa-bg-yellow-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
 .hover\:hawa-text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
@@ -3489,10 +3480,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-blue-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-blue-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -3501,10 +3488,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(34 211 238 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-gray-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-gray-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -3521,10 +3504,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-green-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-green-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@@ -3552,18 +3531,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(192 132 252 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-red-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-red-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-yellow-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-yellow-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -3572,10 +3543,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-blue-800) {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-cyan-800) {
   --tw-text-opacity: 1;
   color: rgb(21 94 117 / var(--tw-text-opacity));
@@ -3592,10 +3559,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-gray-800) {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-green-800) {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
@@ -3615,10 +3578,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(254 226 226 / var(--tw-text-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-red-800) {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

package/dist/index.d.mts

@@ -325,13 +325,14 @@ interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }
 declare function Skeleton({ className, content, animation, ...props }: SkeletonProps): React__default.JSX.Element;
 
+type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
 type ChipTypes = {
     /** The text inside the chip */
     label: string;
     /** The small icon before the chip label  */
     icon?: JSX.Element;
     /** The color of the chip, must be a tailwind color */
-    color?: "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
+    color?: ChipColors;
     /** The size of the chip */
     size?: "small" | "normal" | "large";
     /** Enable/Disable the dot before the label of the chip */
@@ -343,7 +344,7 @@ type ChipTypes = {
 declare const Chip: FC<ChipTypes>;
 
 type AlertTypes = {
-    severity?: SeverityType;
+    severity?: SeverityType | "hyper" | "oceanic";
     /** The title of the alert placed above the text of the alert. Can be used alone */
     title?: any;
     /** The text of the alert placed below the title of the alert. Can be used alone */
@@ -359,7 +360,7 @@ type AlertTypes = {
             variant: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost";
         }
     ];
-    persistant?: boolean;
+    persistent?: boolean;
     icon?: any;
     className?: any;
 };
@@ -857,6 +858,10 @@ declare const Stats: FC<StatTypes>;
 type Item$1 = {
     value: string;
     label: string;
+    badge?: {
+        label: string;
+        color: ChipColors;
+    };
     icon?: any;
     subitems?: SubItem$1[];
     onClick?: () => void;
@@ -1677,4 +1682,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, 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$2 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, 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$2 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -325,13 +325,14 @@ interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }
 declare function Skeleton({ className, content, animation, ...props }: SkeletonProps): React__default.JSX.Element;
 
+type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
 type ChipTypes = {
     /** The text inside the chip */
     label: string;
     /** The small icon before the chip label  */
     icon?: JSX.Element;
     /** The color of the chip, must be a tailwind color */
-    color?: "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
+    color?: ChipColors;
     /** The size of the chip */
     size?: "small" | "normal" | "large";
     /** Enable/Disable the dot before the label of the chip */
@@ -343,7 +344,7 @@ type ChipTypes = {
 declare const Chip: FC<ChipTypes>;
 
 type AlertTypes = {
-    severity?: SeverityType;
+    severity?: SeverityType | "hyper" | "oceanic";
     /** The title of the alert placed above the text of the alert. Can be used alone */
     title?: any;
     /** The text of the alert placed below the title of the alert. Can be used alone */
@@ -359,7 +360,7 @@ type AlertTypes = {
             variant: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost";
         }
     ];
-    persistant?: boolean;
+    persistent?: boolean;
     icon?: any;
     className?: any;
 };
@@ -857,6 +858,10 @@ declare const Stats: FC<StatTypes>;
 type Item$1 = {
     value: string;
     label: string;
+    badge?: {
+        label: string;
+        color: ChipColors;
+    };
     icon?: any;
     subitems?: SubItem$1[];
     onClick?: () => void;
@@ -1677,4 +1682,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, 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$2 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, 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$2 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -2406,8 +2406,8 @@ var Radio = function(_param) {
                     htmlFor: opt.value.toString(),
                     className: cn("hawa-text-sm hawa-font-medium  dark:hawa-text-white", opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900")
                 }, opt.label));
-            })), props.helperText && /* @__PURE__ */ import_react13.default.createElement("p", {
-                className: "hawa-text-xs hawa-text-helper-color"
+            })), /* @__PURE__ */ import_react13.default.createElement("p", {
+                className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
             }, props.helperText));
     }
 };
@@ -2518,18 +2518,24 @@ var Alert = function(_param) {
         info: "",
         warning: "",
         error: "",
-        success: ""
+        success: "",
+        hyper: "",
+        oceanic: ""
     };
     var styleVariant = {
         none: "hawa-text-gray-700 hawa-bg-gray-100 dark:hawa-bg-gray-900 ",
         info: "hawa-text-info-foreground hawa-bg-info/90",
         warning: "hawa-text-warning-foreground hawa-bg-warning/90",
         error: "hawa-text-destructive-foreground hawa-bg-destructive/90",
-        success: "hawa-text-success-foreground hawa-bg-success/90"
+        success: "hawa-text-success-foreground hawa-bg-success/90",
+        hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-700 hawa-via-red-500 hawa-to-yellow-600 ",
+        oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-500 hawa-via-blue-700 hawa-to-purple-500"
     };
     return /* @__PURE__ */ import_react16.default.createElement("div", {
         ref: alertRef
     }, /* @__PURE__ */ import_react16.default.createElement("div", {
+        "data-testid": "alert",
+        "aria-label": "Alert",
         role: "alert",
         dir: direction,
         className: (0, import_clsx6.default)("hawa-relative hawa-mb-4 hawa-flex hawa-flex-col hawa-rounded hawa-p-4 hawa-text-sm hawa-transition-all", styleVariant[severity], closed ? "hawa-opacity-0" : "hawa-opacity-100", className)
@@ -2542,7 +2548,7 @@ var Alert = function(_param) {
     }, /* @__PURE__ */ import_react16.default.createElement("span", {
         className: (0, import_clsx6.default)("hawa-font-bold", direction === "rtl" ? "hawa-ml-8" : "hawa-mr-8")
     }, props.title), /* @__PURE__ */ import_react16.default.createElement("span", {
-        className: (0, import_clsx6.default)(direction === "rtl" ? "hawa-ml-8" : "hawa-mr-8", props.persistant ? "hawa-w-full" : "hawa-w-[calc(100% - 40px)]")
+        className: (0, import_clsx6.default)(direction === "rtl" ? "hawa-ml-8" : "hawa-mr-8", props.persistent ? "hawa-w-full" : "hawa-w-[calc(100% - 40px)]")
     }, props.text), props.actions && /* @__PURE__ */ import_react16.default.createElement("div", {
         className: "hawa-mt-2 hawa-flex hawa-flex-row hawa-gap-2"
     }, props.actions.map(function(act, index) {
@@ -2551,7 +2557,7 @@ var Alert = function(_param) {
             variant: act.variant,
             onClick: act.onClick()
         }, act.label);
-    })))), !props.persistant && /* @__PURE__ */ import_react16.default.createElement("button", {
+    })))), !props.persistent && /* @__PURE__ */ import_react16.default.createElement("button", {
         type: "button",
         "data-dismiss-target": "#alert-default",
         "aria-label": "Close",
@@ -2629,9 +2635,9 @@ var Textarea = React27.forwardRef(function(_param, ref) {
     }, /* @__PURE__ */ React27.createElement("textarea", _object_spread({
         className: cn("hawa-flex hawa-min-h-[80px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50", className),
         ref: ref
-    }, props)), props.helperText && /* @__PURE__ */ React27.createElement("p", {
-        className: "hawa-text-xs hawa-text-helper-color"
-    }, props.helperText));
+    }, props)), /* @__PURE__ */ React27.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+    }, props.helperText), " ");
 });
 Textarea.displayName = "Textarea";
 // components/elements/Slider.tsx
@@ -2724,7 +2730,7 @@ var ColorPicker = function(_param) {
         value: selectedColor,
         className: cn("hawa-block hawa-h-[40px] hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-2 hawa-text-sm  hawa-border-l-0 hawa-border-l-transparent hawa-rounded-l-none hawa-w-24")
     }, textInputProps)))), /* @__PURE__ */ import_react17.default.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/DestroyableCard.tsx
@@ -2842,8 +2848,8 @@ var PinInput = function(_param) {
                 return e.target.select();
             }
         }, props));
-    })), props.helperText && /* @__PURE__ */ import_react19.default.createElement("p", {
-        className: "hawa-my-0 hawa-text-xs hawa-text-helper-color"
+    })), /* @__PURE__ */ import_react19.default.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/FileDropzone.tsx
@@ -4877,8 +4883,8 @@ var Select = function(_param) {
         onInputChange: function(newValue, action) {
             return props.onInputChange(newValue, action);
         }
-    }), props.helperText && /* @__PURE__ */ import_react21.default.createElement("p", {
-        className: "hawa-text-xs hawa-text-helper-color"
+    }), /* @__PURE__ */ import_react21.default.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/PhoneInput.tsx
@@ -4928,10 +4934,10 @@ var PhoneInput = function(props) {
         type: "tel",
         placeholder: "531045453"
     }))), /* @__PURE__ */ import_react22.default.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
-{}// components/elements/AppStores.tsx
+// components/elements/AppStores.tsx
 var import_react23 = __toESM(require("react"));
 var AppStores = function(props) {
     return /* @__PURE__ */ import_react23.default.createElement("div", {
@@ -5190,7 +5196,7 @@ var Input = function(_param) {
     })), props.iconInside && /* @__PURE__ */ import_react25.default.createElement("div", {
         className: "hawa-absolute hawa-end-2 hawa-top-[41px] hawa-mx-1  hawa--translate-y-1/2"
     }, props.iconInside), !forceHideHelperText && /* @__PURE__ */ import_react25.default.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText))));
 };
 // components/elements/DataTable.tsx
@@ -6187,13 +6193,14 @@ var Combobox = function(_param) {
         open: open,
         onOpenChange: setOpen
     }, /* @__PURE__ */ React51.createElement(PopoverTrigger, {
+        asChild: true,
         disabled: props.isLoading || props.preview
     }, props.isLoading ? /* @__PURE__ */ React51.createElement("div", {
         className: "hawa-pb-2"
     }, /* @__PURE__ */ React51.createElement(Skeleton, {
         className: "hawa-h-[40px] hawa-w-full"
     })) : /* @__PURE__ */ React51.createElement("div", {
-        className: "hawa-flex hawa-flex-col hawa-gap-2 "
+        className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start "
     }, /* @__PURE__ */ React51.createElement("div", {
         className: cn("hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800", props.preview ? "hawa-opacity-100" : "hawa-opacity-0")
     }), /* @__PURE__ */ React51.createElement("button", {
@@ -6214,9 +6221,9 @@ var Combobox = function(_param) {
     }, /* @__PURE__ */ React51.createElement("path", {
         d: "m6 9 6 6 6-6"
     }))), /* @__PURE__ */ React51.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
-    }, props.helperText), " ")), /* @__PURE__ */ React51.createElement(PopoverContent, {
-        className: cn("popover-w-parent")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+    }, props.helperText))), /* @__PURE__ */ React51.createElement(PopoverContent, {
+        className: cn("popover-w-parent", props.helperText && "-hawa-mt-4")
     }, /* @__PURE__ */ React51.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React51.createElement(CommandInput, {
         placeholder: props.searchPlaceholder
     }), /* @__PURE__ */ React51.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React51.createElement(CommandGroup, {
@@ -6657,8 +6664,8 @@ var Stats = function(_param) {
         className: "hawa-text-2xl hawa-font-bold"
     }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, {
         className: "hawa-mt-2 hawa-h-4 hawa-w-1/2"
-    }) : props.helperText && /* @__PURE__ */ import_react33.default.createElement("p", {
-        className: "hawa-text-xs hawa-text-muted-foreground"
+    }) : /* @__PURE__ */ import_react33.default.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText), props.isLoading && props.chart ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, {
         className: "hawa-mt-2 hawa-h-4 hawa-w-1/2"
     }) : props.chart));
@@ -6806,8 +6813,12 @@ var SidebarItem = function(_param) {
         }, /* @__PURE__ */ React58.createElement("div", {
             className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2"
         }, item.icon && item.icon, /* @__PURE__ */ React58.createElement("span", {
-            className: cn("hawa-whitespace-nowrap hawa-transition-all", isOpen ? "hawa-opacity-100" : "hawa-opacity-0")
-        }, item.label)));
+            className: cn("hawa-whitespace-nowrap hawa-transition-all hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center", isOpen ? "hawa-opacity-100" : "hawa-opacity-0")
+        }, item.label, " ", item.badge && /* @__PURE__ */ React58.createElement(Chip, {
+            label: item.badge.label,
+            color: "hyper",
+            size: "small"
+        }))));
     }
 };
 // components/layout/Copyrights.tsx

package/dist/index.mjs

@@ -1885,7 +1885,16 @@ var Radio = ({
           },
           opt.label
         )
-      ))), props.helperText && /* @__PURE__ */ React22.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText));
+      ))), /* @__PURE__ */ React22.createElement(
+        "p",
+        {
+          className: cn(
+            "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+            props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+          )
+        },
+        props.helperText
+      ));
   }
 };
 
@@ -2033,18 +2042,24 @@ var Alert = ({
     info: "",
     warning: "",
     error: "",
-    success: ""
+    success: "",
+    hyper: "",
+    oceanic: ""
   };
   let styleVariant = {
     none: "hawa-text-gray-700 hawa-bg-gray-100 dark:hawa-bg-gray-900 ",
     info: "hawa-text-info-foreground hawa-bg-info/90",
     warning: "hawa-text-warning-foreground hawa-bg-warning/90",
     error: "hawa-text-destructive-foreground hawa-bg-destructive/90",
-    success: "hawa-text-success-foreground hawa-bg-success/90"
+    success: "hawa-text-success-foreground hawa-bg-success/90",
+    hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-700 hawa-via-red-500 hawa-to-yellow-600 ",
+    oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-500 hawa-via-blue-700 hawa-to-purple-500"
   };
   return /* @__PURE__ */ React25.createElement("div", { ref: alertRef }, /* @__PURE__ */ React25.createElement(
     "div",
     {
+      "data-testid": "alert",
+      "aria-label": "Alert",
       role: "alert",
       dir: direction,
       className: clsx6(
@@ -2074,7 +2089,7 @@ var Alert = ({
       {
         className: clsx6(
           direction === "rtl" ? "hawa-ml-8" : "hawa-mr-8",
-          props.persistant ? "hawa-w-full" : "hawa-w-[calc(100% - 40px)]"
+          props.persistent ? "hawa-w-full" : "hawa-w-[calc(100% - 40px)]"
         )
       },
       props.text
@@ -2087,7 +2102,7 @@ var Alert = ({
       },
       act.label
     ))))),
-    !props.persistant && /* @__PURE__ */ React25.createElement(
+    !props.persistent && /* @__PURE__ */ React25.createElement(
       "button",
       {
         type: "button",
@@ -2183,7 +2198,16 @@ var Textarea = React27.forwardRef(
         ref,
         ...props
       }
-    ), props.helperText && /* @__PURE__ */ React27.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText));
+    ), /* @__PURE__ */ React27.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    ), " ");
   }
 );
 Textarea.displayName = "Textarea";
@@ -2290,7 +2314,7 @@ var ColorPicker = ({
     "p",
     {
       className: cn(
-        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
         props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
       )
     },
@@ -2442,7 +2466,16 @@ var PinInput = ({
         ...props
       }
     ))
-  ), props.helperText && /* @__PURE__ */ React31.createElement("p", { className: "hawa-my-0 hawa-text-xs hawa-text-helper-color" }, props.helperText));
+  ), /* @__PURE__ */ React31.createElement(
+    "p",
+    {
+      className: cn(
+        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+        props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+      )
+    },
+    props.helperText
+  ));
 };
 
 // components/elements/FileDropzone.tsx
@@ -4494,7 +4527,16 @@ var Select = ({ labelKey = "label", ...props }) => {
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    props.helperText && /* @__PURE__ */ React33.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText)
+    /* @__PURE__ */ React33.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    )
   );
 };
 
@@ -4548,15 +4590,13 @@ var PhoneInput = (props) => {
     "p",
     {
       className: cn(
-        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
         props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
       )
     },
     props.helperText
   ));
 };
-{
-}
 
 // components/elements/AppStores.tsx
 import React35 from "react";
@@ -4861,7 +4901,7 @@ var Input = ({
       "p",
       {
         className: cn(
-          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
           props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
         )
       },
@@ -5903,7 +5943,7 @@ var Combobox = ({
       )
     },
     props.label && /* @__PURE__ */ React51.createElement(Label2, null, props.label),
-    /* @__PURE__ */ React51.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React51.createElement(PopoverTrigger, { disabled: props.isLoading || props.preview }, props.isLoading ? /* @__PURE__ */ React51.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React51.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 " }, /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React51.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React51.createElement(PopoverTrigger, { asChild: true, disabled: props.isLoading || props.preview }, props.isLoading ? /* @__PURE__ */ React51.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React51.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React51.createElement(
       "div",
       {
         className: cn(
@@ -5946,47 +5986,53 @@ var Combobox = ({
       "p",
       {
         className: cn(
-          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
           props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
         )
       },
       props.helperText
-    ), " ")), /* @__PURE__ */ React51.createElement(PopoverContent, { className: cn("popover-w-parent") }, /* @__PURE__ */ React51.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React51.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React51.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React51.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React51.createElement(
-      CommandItem,
+    ))), /* @__PURE__ */ React51.createElement(
+      PopoverContent,
       {
-        key: getProperty(item, valueKey),
-        onSelect: () => {
-          const newValue = getProperty(item, valueKey);
-          setValue(newValue === value ? "" : newValue);
-          if (props.onChange) {
-            props.onChange(
-              newValue === value ? "" : newValue
-            );
-          }
-          setOpen(false);
-        }
+        className: cn("popover-w-parent", props.helperText && "-hawa-mt-4")
       },
-      /* @__PURE__ */ React51.createElement(
-        "svg",
+      /* @__PURE__ */ React51.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React51.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React51.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React51.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React51.createElement(
+        CommandItem,
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: cn(
-            "hawa-mr-2 hawa-h-4 hawa-w-4",
-            value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
-          )
+          key: getProperty(item, valueKey),
+          onSelect: () => {
+            const newValue = getProperty(item, valueKey);
+            setValue(newValue === value ? "" : newValue);
+            if (props.onChange) {
+              props.onChange(
+                newValue === value ? "" : newValue
+              );
+            }
+            setOpen(false);
+          }
         },
-        /* @__PURE__ */ React51.createElement("polyline", { points: "20 6 9 17 4 12" })
-      ),
-      getProperty(item, labelKey)
-    ))))))
+        /* @__PURE__ */ React51.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: cn(
+              "hawa-mr-2 hawa-h-4 hawa-w-4",
+              value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
+            )
+          },
+          /* @__PURE__ */ React51.createElement("polyline", { points: "20 6 9 17 4 12" })
+        ),
+        getProperty(item, labelKey)
+      ))))
+    ))
   );
 };
 
@@ -6455,7 +6501,16 @@ var Stats = ({ variant = "default", ...props }) => {
       className: cn(props.className)
     },
     /* @__PURE__ */ React57.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between hawa-p-4 hawa-items-center" }, /* @__PURE__ */ React57.createElement(CardTitle, { className: "hawa-text-sm hawa-font-medium" }, props.label), props.icon && /* @__PURE__ */ React57.createElement("span", null, props.icon)),
-    /* @__PURE__ */ React57.createElement(CardContent, null, props.isLoading ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-h-8 hawa-w-3/4" }) : /* @__PURE__ */ React57.createElement("div", { className: "hawa-text-2xl hawa-font-bold" }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : props.helperText && /* @__PURE__ */ React57.createElement("p", { className: "hawa-text-xs hawa-text-muted-foreground" }, props.helperText), props.isLoading && props.chart ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : props.chart)
+    /* @__PURE__ */ React57.createElement(CardContent, null, props.isLoading ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-h-8 hawa-w-3/4" }) : /* @__PURE__ */ React57.createElement("div", { className: "hawa-text-2xl hawa-font-bold" }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : /* @__PURE__ */ React57.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    ), props.isLoading && props.chart ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : props.chart)
   );
 };
 
@@ -6644,11 +6699,13 @@ var SidebarItem = ({
         "span",
         {
           className: cn(
-            "hawa-whitespace-nowrap hawa-transition-all",
+            "hawa-whitespace-nowrap hawa-transition-all hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center",
             isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         },
-        item.label
+        item.label,
+        " ",
+        item.badge && /* @__PURE__ */ React58.createElement(Chip, { label: item.badge.label, color: "hyper", size: "small" })
       ))
     );
   }

package/package.json

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