@sikka/hawa 0.4.1-next → 0.4.3-next

package/dist/index.css

@@ -663,27 +663,45 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-inset-0 {
   inset: 0px;
 }
+.hawa--left-1 {
+  left: -0.25rem;
+}
 .hawa-bottom-0 {
   bottom: 0px;
 }
+.hawa-bottom-14 {
+  bottom: 3.5rem;
+}
 .hawa-bottom-2 {
   bottom: 0.5rem;
 }
 .hawa-bottom-4 {
   bottom: 1rem;
 }
+.hawa-bottom-5 {
+  bottom: 1.25rem;
+}
 .hawa-left-0 {
   left: 0px;
 }
 .hawa-left-2 {
   left: 0.5rem;
 }
+.hawa-left-2\.5 {
+  left: 0.625rem;
+}
 .hawa-left-3 {
   left: 0.75rem;
 }
 .hawa-left-4 {
   left: 1rem;
 }
+.hawa-left-5 {
+  left: 1.25rem;
+}
+.hawa-left-7 {
+  left: 1.75rem;
+}
 .hawa-left-\[50\%\] {
   left: 50%;
 }
@@ -696,21 +714,42 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-right-2 {
   right: 0.5rem;
 }
+.hawa-right-2\.5 {
+  right: 0.625rem;
+}
 .hawa-right-4 {
   right: 1rem;
 }
+.hawa-right-5 {
+  right: 1.25rem;
+}
+.hawa-right-7 {
+  right: 1.75rem;
+}
 .hawa-top-0 {
   top: 0px;
 }
 .hawa-top-1\/2 {
   top: 50%;
 }
+.hawa-top-14 {
+  top: 3.5rem;
+}
 .hawa-top-2 {
   top: 0.5rem;
 }
+.hawa-top-2\.5 {
+  top: 0.625rem;
+}
 .hawa-top-4 {
   top: 1rem;
 }
+.hawa-top-5 {
+  top: 1.25rem;
+}
+.hawa-top-7 {
+  top: 1.75rem;
+}
 .hawa-top-\[22px\] {
   top: 22px;
 }
@@ -720,12 +759,21 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-\[50\%\] {
   top: 50%;
 }
+.hawa-top-\[76px\] {
+  top: 76px;
+}
 .hawa-isolate {
   isolation: isolate;
 }
 .hawa-z-10 {
   z-index: 10;
 }
+.hawa-z-30 {
+  z-index: 30;
+}
+.hawa-z-40 {
+  z-index: 40;
+}
 .hawa-z-50 {
   z-index: 50;
 }
@@ -742,6 +790,10 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
+.hawa-mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
 .hawa-mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -775,21 +827,33 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-mb-5 {
   margin-bottom: 1.25rem;
 }
+.hawa-ml-14 {
+  margin-left: 3.5rem;
+}
 .hawa-ml-2 {
   margin-left: 0.5rem;
 }
+.hawa-ml-40 {
+  margin-left: 10rem;
+}
 .hawa-ml-8 {
   margin-left: 2rem;
 }
 .hawa-ml-auto {
   margin-left: auto;
 }
+.hawa-mr-14 {
+  margin-right: 3.5rem;
+}
 .hawa-mr-2 {
   margin-right: 0.5rem;
 }
 .hawa-mr-3 {
   margin-right: 0.75rem;
 }
+.hawa-mr-40 {
+  margin-right: 10rem;
+}
 .hawa-mr-8 {
   margin-right: 2rem;
 }
@@ -1162,6 +1226,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hawa--rotate-90 {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hawa-rotate-0 {
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1170,6 +1238,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hawa-rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hawa-scale-100 {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -1237,6 +1309,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-flex-row {
   flex-direction: row;
 }
+.hawa-flex-row-reverse {
+  flex-direction: row-reverse;
+}
 .hawa-flex-col {
   flex-direction: column;
 }
@@ -1344,6 +1419,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-overflow-x-hidden {
   overflow-x: hidden;
 }
+.hawa-overflow-x-clip {
+  overflow-x: clip;
+}
 .hawa-overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1504,6 +1582,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
+.hawa-bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
 .hawa-bg-border {
   background-color: hsl(var(--border));
 }
@@ -1518,6 +1600,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: hsl(var(--error) / var(--tw-bg-opacity));
 }
+.hawa-bg-foreground\/5 {
+  background-color: hsl(var(--foreground) / 0.05);
+}
 .hawa-bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1581,6 +1666,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-bg-primary\/5 {
   background-color: hsl(var(--primary) / 0.05);
 }
+.hawa-bg-primary\/90 {
+  background-color: hsl(var(--primary) / 0.9);
+}
 .hawa-bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1785,6 +1873,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-text-center {
   text-align: center;
 }
+.hawa-text-right {
+  text-align: right;
+}
 .hawa-text-start {
   text-align: start;
 }
@@ -1842,6 +1933,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-uppercase {
   text-transform: uppercase;
 }
+.hawa-capitalize {
+  text-transform: capitalize;
+}
 .hawa-leading-4 {
   line-height: 1rem;
 }
@@ -2003,6 +2097,14 @@ input[type="number"]::-webkit-inner-spin-button,
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.hawa-ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.hawa-ring-primary\/30 {
+  --tw-ring-color: hsl(var(--primary) / 0.3);
+}
 .hawa-ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
@@ -2746,6 +2848,10 @@ body {
   --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));
+}
 :is(.hawa-dark .dark\:hawa-bg-gray-700) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -2964,6 +3070,10 @@ body {
 .\[\&\:not\(\:last-child\)\]\:hawa-border-r:not(:last-child) {
   border-right-width: 1px;
 }
+.\[\&\[data-state\=open\]\>svg\]\:hawa--rotate-90[data-state=open]>svg {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .\[\&\[data-state\=open\]\>svg\]\:hawa-rotate-180[data-state=open]>svg {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.d.mts

@@ -236,6 +236,7 @@ declare const Popover: React.FC<HawaPopoverTypes>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 
 interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    helperText?: string;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
@@ -243,7 +244,7 @@ declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.Slide
 
 type ExtendedDropdownMenuContentProps = Partial<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>> & {};
 type ExtendedDropdownMenuTriggerProps = Partial<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>> & {};
-type SubItem = {
+type SubItem$2 = {
     label?: string;
     value?: any;
     icon?: any;
@@ -260,7 +261,7 @@ type MenuItemType = {
     itemType?: "separator" | "label" | string;
     action?: () => void;
     highlighted?: boolean;
-    subitems?: SubItem[];
+    subitems?: SubItem$2[];
     disabled?: boolean;
 };
 interface DropdownMenuProps {
@@ -644,6 +645,83 @@ type StatTypes = {
 };
 declare const Stats: FC<StatTypes>;
 
+type Item$1 = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: SubItem$1[];
+    onClick?: () => void;
+};
+type SubItem$1 = {
+    value: string;
+    label: string;
+    icon?: any;
+    onClick?: () => void;
+};
+interface SidebarGroupProps {
+    title?: string;
+    items: Item$1[];
+    openedItem?: any;
+    setOpenedItem?: any;
+    selectedItem?: any;
+    isOpen?: boolean;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    direction?: "rtl" | "ltr";
+}
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: Item$1;
+    selectedItem?: any;
+    direction?: "rtl" | "ltr";
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    isOpen?: boolean;
+}>;
+
+type AppLayoutTypes = {
+    design?: "default" | "bubbles" | "floating";
+    /** The pages of the side drawer */
+    drawerItems: Item[];
+    direction?: "rtl" | "ltr";
+    currentPage: string;
+    pageTitle?: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
+    topBar?: boolean;
+    username?: string;
+    email?: string;
+    avatarImage?: any;
+    drawerSize?: "sm" | "md" | "large";
+    profileMenuItems?: MenuItemType[];
+    profileMenuWidth: "default" | "sm" | "lg" | "parent";
+    onSettingsClick?: () => void;
+    onDrawerExpand?: (e: any) => void;
+    keepDrawerOpen?: boolean;
+    DrawerFooterActions?: any;
+    clickedItem?: any;
+    texts?: {
+        expandSidebar?: string;
+        collapseSidebar?: string;
+    };
+};
+type Item = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: SubItem[];
+    onClick?: () => void;
+};
+type SubItem = {
+    value: string;
+    label: string;
+    icon?: any;
+    onClick?: () => void;
+};
+declare const AppLayout: React__default.FunctionComponent<AppLayoutTypes>;
+
 type LoginFormTypes = {
     texts?: {
         emailLabel?: string;
@@ -665,39 +743,55 @@ type LoginFormTypes = {
         loginViaGithubLabel?: string;
         loginViaTwitterLabel?: string;
     };
+    /** Function to handle language change.   */
     handleLanguage?: () => void;
-    currentLanguage?: any;
+    /** Current selected language.   */
+    currentLanguage?: string;
+    /** Function to handle theme color mode change.   */
     handleColorMode?: () => void;
-    currentColorMode?: any;
+    /** Current selected theme color mode.   */
+    currentColorMode?: "light" | "dark";
+    /** If true, only logos are displayed in third-party auth buttons.   */
     logosOnly?: boolean;
+    /** Direction of text and UI elements, either left-to-right or right-to-left.   */
     direction?: "rtl" | "ltr";
-    showError?: any;
+    /** If true, an error alert is displayed at the top of the form.   */
+    showError?: boolean;
+    /** Title text of error alert.   */
     errorTitle?: string;
+    /** Description text of error alert.   */
     errorText?: string;
+    /** Login identifier type user will use to log in.   */
     loginType?: "email" | "username" | "phone";
+    /** If true, the reset password option is hidden.   */
     withoutResetPassword?: boolean;
+    /** If true, the sign-up option is hidden.   */
     withoutSignUp?: boolean;
-    /**
-     *show spinner if true
-     */
-    isLoading?: any;
+    /** If true, a loading spinner is displayed within the main form submit button.   */
+    isLoading?: boolean;
+    /** If true, a loading spinner is displayed within the Google login button.   */
     isGoogleLoading?: boolean;
+    /** If true, a loading spinner is displayed within the Twitter login button.   */
     isTwitterLoading?: boolean;
+    /** If true, a loading spinner is displayed within the Github login button.   */
     isGithubLoading?: boolean;
+    /** If true, Google login option is displayed.   */
     viaGoogle?: boolean;
+    /** If true, Github login option is displayed.   */
     viaGithub?: boolean;
+    /** If true, Twitter login option is displayed.   */
     viaTwitter?: boolean;
-    /**
-     * Handle the login function.
-     */
+    /** Function to handle form submission.   */
     handleLogin?: (e: any) => void;
-    /**
-     * Handle routing to register page
-     */
+    /** Function to route user to the sign-up page.   */
     handleRouteToSignUp?: () => void;
+    /** Function to handle forgotten password case.   */
     handleForgotPassword?: () => void;
+    /** Function to handle Google login.   */
     handleGoogleLogin?: () => void;
+    /** Function to handle Github login.   */
     handleGithubLogin?: () => void;
+    /** Function to handle Twitter login.   */
     handleTwitterLogin?: () => void;
 };
 declare const LoginForm: FC<LoginFormTypes>;
@@ -904,6 +998,11 @@ type ComponentTypes = {
 };
 declare const FeedbackEmoji: FC<ComponentTypes>;
 
+type FeedbackFormType = {
+    onSubmit: (data: any) => void;
+};
+declare const FeedbackForm: React__default.FC<FeedbackFormType>;
+
 type TabType = {
     title: string;
     content: string;
@@ -919,16 +1018,6 @@ type LegalTextsType = {
 };
 declare const LegalTexts: React__default.FC<LegalTextsType>;
 
-type NotFoundTypes = {
-    variant?: "outlined" | "contained" | "neobrutalism";
-    texts?: {
-        pageNotFound?: string;
-        ifLost?: string;
-        home?: string;
-    };
-};
-declare const NotFound: FC<NotFoundTypes>;
-
 type TEmptyState$1 = {
     onActionClick: () => void;
     texts?: {
@@ -948,8 +1037,9 @@ type TLeadGenerator = {
         title?: string;
         subtitle?: string;
         submit?: string;
+        invalidEmail?: string;
     };
-    handleNewsletterSub: (e: string) => void;
+    submitHandler: (e: string) => void;
 };
 declare const LeadGenerator: FC<TLeadGenerator>;
 
@@ -961,6 +1051,16 @@ type AnnouncementTypes = {
 };
 declare const Announcement: FC<AnnouncementTypes>;
 
+type NotFoundTypes = {
+    variant?: "outlined" | "contained" | "neobrutalism";
+    texts?: {
+        pageNotFound?: string;
+        ifLost?: string;
+        home?: string;
+    };
+};
+declare const NotFound: FC<NotFoundTypes>;
+
 type TNoPermission = {
     texts?: {
         title: string;
@@ -977,4 +1077,4 @@ type UsageCardTypes = {
 };
 declare const Usage: FC<UsageCardTypes>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, Alert, Announcement, AppLanding, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackRating, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, InterfaceSettings, Label, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, Separator, SimpleTable, Skeleton, Slider, SortButton, Stats, SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UserReferralSource, buttonVariants, useFormField };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, InterfaceSettings, Label, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, Separator, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, SubItem$2 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UserReferralSource, buttonVariants, useFormField };