@sikka/hawa 0.2.42-next → 0.2.43-next

package/dist/index.css

@@ -388,7 +388,7 @@ video {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 210 50% 98%;
+    --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -402,24 +402,17 @@ video {
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --info: 209 62% 50%;
-    --info-foreground: 0 0% 98%;
-    --success: 148 48% 43%;
-    --success-foreground: 0 0% 98%;
-    --warning: 24 75% 50%;
-    --warning-foreground: 0 0% 98%;
-    --error: 0 84.2% 60.2%;
-    --error-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
+    --ring: 240 5.9% 10%;
+    --radius: 0.1rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
   }
+
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 2%;
+    --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
@@ -432,7 +425,7 @@ video {
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
+    --destructive-foreground: 0 0% 98%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
@@ -673,6 +666,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-left-2 {
   left: 0.5rem;
 }
+.hawa-left-3 {
+  left: 0.75rem;
+}
 .hawa-left-4 {
   left: 1rem;
 }
@@ -682,6 +678,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-right-0 {
   right: 0px;
 }
+.hawa-right-1 {
+  right: 0.25rem;
+}
 .hawa-right-2 {
   right: 0.5rem;
 }
@@ -691,12 +690,21 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-0 {
   top: 0px;
 }
+.hawa-top-1\/2 {
+  top: 50%;
+}
 .hawa-top-2 {
   top: 0.5rem;
 }
 .hawa-top-4 {
   top: 1rem;
 }
+.hawa-top-\[22px\] {
+  top: 22px;
+}
+.hawa-top-\[41px\] {
+  top: 41px;
+}
 .hawa-top-\[50\%\] {
   top: 50%;
 }
@@ -733,6 +741,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa--mt-1 {
   margin-top: -0.25rem;
 }
+.hawa-mb-0 {
+  margin-bottom: 0px;
+}
 .hawa-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -745,6 +756,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-mb-4 {
   margin-bottom: 1rem;
 }
+.hawa-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .hawa-ml-2 {
   margin-left: 0.5rem;
 }
@@ -760,6 +774,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-mr-8 {
   margin-right: 2rem;
 }
+.hawa-mt-0 {
+  margin-top: 0px;
+}
 .hawa-mt-1 {
   margin-top: 0.25rem;
 }
@@ -838,6 +855,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-9 {
   height: 2.25rem;
 }
+.hawa-h-\[0\.8px\] {
+  height: 0.8px;
+}
 .hawa-h-\[16px\] {
   height: 16px;
 }
@@ -856,6 +876,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[30px\] {
   height: 30px;
 }
+.hawa-h-\[38px\] {
+  height: 38px;
+}
 .hawa-h-auto {
   height: auto;
 }
@@ -872,6 +895,10 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-screen {
   height: 100vh;
 }
+.hawa-max-h-fit {
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+}
 .hawa-max-h-screen {
   max-height: 100vh;
 }
@@ -990,6 +1017,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-max-w-2xl {
   max-width: 42rem;
 }
+.hawa-max-w-2xs {
+  max-width: 250px;
+}
 .hawa-max-w-4xl {
   max-width: 56rem;
 }
@@ -1032,6 +1062,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-translate-x: -0.125rem;
   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--translate-y-1\/2 {
+  --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-translate-x-0 {
   --tw-translate-x: 0px;
   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));
@@ -1307,6 +1341,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-primary {
   border-color: hsl(var(--primary));
 }
+.hawa-border-transparent {
+  border-color: transparent;
+}
 .hawa-bg-background {
   background-color: hsl(var(--background));
 }
@@ -1541,6 +1578,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pl-0 {
   padding-left: 0px;
 }
+.hawa-pl-10 {
+  padding-left: 2.5rem;
+}
 .hawa-pl-2 {
   padding-left: 0.5rem;
 }
@@ -1904,6 +1944,60 @@ input[type="number"]::-webkit-inner-spin-button,
 body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }
+/* 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 210 50% 98%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --info: 209 62% 50%;
+    --info-foreground: 0 0% 98%;
+    --success: 148 48% 43%;
+    --success-foreground: 0 0% 98%;
+    --warning: 24 75% 50%;
+    --warning-foreground: 0 0% 98%;
+    --error: 0 84.2% 60.2%;
+    --error-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 2%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+} */
 .placeholder\:hawa-text-muted-foreground::-moz-placeholder {
   color: hsl(var(--muted-foreground));
 }
@@ -2289,6 +2383,9 @@ body {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   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\=active\]\:hawa-bg-primary[data-state=active] {
+  background-color: hsl(var(--primary));
+}
 .data-\[state\=checked\]\:hawa-bg-primary[data-state=checked] {
   background-color: hsl(var(--primary));
 }
@@ -2298,6 +2395,9 @@ body {
 .data-\[state\=open\]\:hawa-bg-accent[data-state=open] {
   background-color: hsl(var(--accent));
 }
+.data-\[state\=active\]\:hawa-text-primary-foreground[data-state=active] {
+  color: hsl(var(--primary-foreground));
+}
 .data-\[state\=checked\]\:hawa-text-primary-foreground[data-state=checked] {
   color: hsl(var(--primary-foreground));
 }
@@ -2307,6 +2407,11 @@ body {
 .data-\[disabled\]\:hawa-opacity-50[data-disabled] {
   opacity: 0.5;
 }
+.data-\[state\=active\]\:hawa-shadow-sm[data-state=active] {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .data-\[swipe\=move\]\:hawa-transition-none[data-swipe=move] {
   transition-property: none;
 }
@@ -2389,6 +2494,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
+:is(.hawa-dark .dark\:hawa-border-primary\/10) {
+  border-color: hsl(var(--primary) / 0.1);
+}
 :is(.hawa-dark .dark\:hawa-bg-background) {
   background-color: hsl(var(--background));
 }

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import React__default, { FC, ReactNode, ChangeEvent, RefObject } from 'react';
+import React__default, { FC, ReactNode, ChangeEvent, RefObject, PropsWithRef } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -10,6 +10,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
@@ -359,4 +360,44 @@ type BackToTopTypes = {
 };
 declare const BackToTop: FC<BackToTopTypes>;
 
-export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Label, Loading, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, Radio, Skeleton, Slider, SubItem, Switch, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants };
+type TextFieldTypes = {
+    isLoading?: boolean;
+    margin?: "none" | "normal" | "large";
+    width?: "small" | "normal" | "full";
+    /** The label of the input field   */
+    label?: any;
+    /** Disable/Enable multiple line text input field   */
+    multiline?: boolean;
+    /** The small red text under the input field to show validation or a hint.   */
+    helperText?: any;
+    /** The value of the input field */
+    value?: any;
+    props?: PropsWithRef<"input">;
+    /** The type of input field. Same as the types of the HTML input element */
+    type?: any;
+    /** The placeholder of the input field  */
+    placeholder?: any;
+    defaultValue?: any;
+    name?: any;
+    inputProps?: any;
+    onChange?: any;
+    ref?: any;
+    /** The icon inside the input field */
+    icon?: any;
+    /** Boolean to enable/disable editing the input field and using it as a text field   */
+    preview?: boolean;
+    autoComplete?: any;
+    maxLength?: any;
+    className?: any;
+    iconInside?: React__default.ReactNode;
+};
+declare const Input: FC<TextFieldTypes>;
+
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    orientation?: "horizontal" | "vertical" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Input, Label, Loading, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, Radio, Skeleton, Slider, SubItem, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import React__default, { FC, ReactNode, ChangeEvent, RefObject } from 'react';
+import React__default, { FC, ReactNode, ChangeEvent, RefObject, PropsWithRef } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -10,6 +10,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
@@ -359,4 +360,44 @@ type BackToTopTypes = {
 };
 declare const BackToTop: FC<BackToTopTypes>;
 
-export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Label, Loading, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, Radio, Skeleton, Slider, SubItem, Switch, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants };
+type TextFieldTypes = {
+    isLoading?: boolean;
+    margin?: "none" | "normal" | "large";
+    width?: "small" | "normal" | "full";
+    /** The label of the input field   */
+    label?: any;
+    /** Disable/Enable multiple line text input field   */
+    multiline?: boolean;
+    /** The small red text under the input field to show validation or a hint.   */
+    helperText?: any;
+    /** The value of the input field */
+    value?: any;
+    props?: PropsWithRef<"input">;
+    /** The type of input field. Same as the types of the HTML input element */
+    type?: any;
+    /** The placeholder of the input field  */
+    placeholder?: any;
+    defaultValue?: any;
+    name?: any;
+    inputProps?: any;
+    onChange?: any;
+    ref?: any;
+    /** The icon inside the input field */
+    icon?: any;
+    /** Boolean to enable/disable editing the input field and using it as a text field   */
+    preview?: boolean;
+    autoComplete?: any;
+    maxLength?: any;
+    className?: any;
+    iconInside?: React__default.ReactNode;
+};
+declare const Input: FC<TextFieldTypes>;
+
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    orientation?: "horizontal" | "vertical" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Input, Label, Loading, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, Radio, Skeleton, Slider, SubItem, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants };

package/dist/index.js

@@ -290,6 +290,9 @@ __export(components_exports, {
     FileDropzone: function() {
         return FileDropzone;
     },
+    Input: function() {
+        return Input;
+    },
     Label: function() {
         return Label;
     },
@@ -320,6 +323,18 @@ __export(components_exports, {
     Switch: function() {
         return Switch;
     },
+    Tabs: function() {
+        return Tabs;
+    },
+    TabsContent: function() {
+        return TabsContent;
+    },
+    TabsList: function() {
+        return TabsList;
+    },
+    TabsTrigger: function() {
+        return TabsTrigger;
+    },
     Textarea: function() {
         return Textarea;
     },
@@ -4006,6 +4021,98 @@ var BackToTop = function(_param) {
         d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
     })));
 };
+// components/elements/Input.tsx
+var import_react18 = __toESM(require("react"));
+var Input = function(_param) {
+    var _param_margin = _param.margin, margin = _param_margin === void 0 ? "none" : _param_margin, _param_width = _param.width, width = _param_width === void 0 ? "full" : _param_width, _param_preview = _param.preview, preview = _param_preview === void 0 ? false : _param_preview, props = _object_without_properties(_param, [
+        "margin",
+        "width",
+        "preview"
+    ]);
+    var marginStyles = {
+        none: "hawa-mb-0",
+        normal: "hawa-mb-3",
+        large: "hawa-mb-5"
+    };
+    var widthStyles = {
+        small: "hawa-w-full hawa-max-w-2xs",
+        normal: "hawa-w-1/2",
+        full: "hawa-w-full"
+    };
+    var defaultStyle = "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-2";
+    var defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-2 hawa-text-sm hawa-text-black dark:hawa-text-white ";
+    return /* @__PURE__ */ import_react18.default.createElement("div", {
+        className: cn(defaultStyle, marginStyles[margin], widthStyles[width], props.className)
+    }, props.label && /* @__PURE__ */ import_react18.default.createElement(Label, null, props.label), props.isLoading ? /* @__PURE__ */ import_react18.default.createElement(Skeleton, {
+        className: "hawa-h-[38px] hawa-w-full"
+    }) : /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.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", preview ? "hawa-opacity-100" : "hawa-opacity-0")
+    }), /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", {
+        className: cn("hawa-relative")
+    }, props.icon && /* @__PURE__ */ import_react18.default.createElement("div", {
+        className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2"
+    }, props.icon), /* @__PURE__ */ import_react18.default.createElement("input", _object_spread_props(_object_spread({}, props), {
+        className: cn(defaultInputStyle, props.icon && "hawa-pl-10", "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2", preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0"),
+        disabled: preview
+    }))), props.iconInside && /* @__PURE__ */ import_react18.default.createElement("div", {
+        className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2"
+    }, props.iconInside), props.helperText && /* @__PURE__ */ import_react18.default.createElement("p", {
+        className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
+    }, props.helperText))));
+};
+// components/elements/Tabs.tsx
+var React30 = __toESM(require("react"));
+var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
+var TabsContext = React30.createContext({
+    orientation: "vertical"
+});
+var Tabs = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, orientation = _param.orientation, props = _object_without_properties(_param, [
+        "className",
+        "orientation"
+    ]);
+    return React30.createElement(TabsPrimitive.Root, _object_spread({
+        ref: ref,
+        className: cn("hawa-flex hawa-gap-2", orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col", className)
+    }, props), /* @__PURE__ */ React30.createElement(TabsContext.Provider, {
+        value: {
+            orientation: orientation
+        }
+    }, props.children));
+});
+Tabs.displayName = TabsPrimitive.Root.displayName;
+var TabsList = React30.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    var orientation = React30.useContext(TabsContext).orientation;
+    console.log("orient ", orientation);
+    return /* @__PURE__ */ React30.createElement(TabsPrimitive.List, _object_spread({
+        ref: ref,
+        className: cn("hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10", orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row", className)
+    }, props));
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React30.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /* @__PURE__ */ React30.createElement(TabsPrimitive.Trigger, _object_spread({
+        ref: ref,
+        className: cn("hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10", className)
+    }, props));
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return React30.createElement(TabsPrimitive.Content, _object_spread({
+        ref: ref,
+        className: cn("hawa-w-full hawa-ring-offset-hawa-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2", className)
+    }, props));
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     ActionCard: ActionCard,
@@ -4033,6 +4140,7 @@ var BackToTop = function(_param) {
     DialogTrigger: DialogTrigger,
     DropdownMenu: DropdownMenu,
     FileDropzone: FileDropzone,
+    Input: Input,
     Label: Label,
     Loading: Loading,
     PhoneInput: PhoneInput,
@@ -4043,6 +4151,10 @@ var BackToTop = function(_param) {
     Skeleton: Skeleton,
     Slider: Slider,
     Switch: Switch,
+    Tabs: Tabs,
+    TabsContent: TabsContent,
+    TabsList: TabsList,
+    TabsTrigger: TabsTrigger,
     Textarea: Textarea,
     Toast: Toast,
     ToastAction: ToastAction,

package/dist/index.mjs

@@ -3922,6 +3922,123 @@ var BackToTop = ({ ...props }) => {
     )
   );
 };
+
+// components/elements/Input.tsx
+import React29 from "react";
+var Input = ({
+  margin = "none",
+  width = "full",
+  preview = false,
+  ...props
+}) => {
+  let marginStyles = {
+    none: "hawa-mb-0",
+    normal: "hawa-mb-3",
+    large: "hawa-mb-5"
+  };
+  let widthStyles = {
+    small: "hawa-w-full hawa-max-w-2xs",
+    normal: "hawa-w-1/2",
+    full: "hawa-w-full"
+  };
+  let defaultStyle = "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-2";
+  let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-2 hawa-text-sm hawa-text-black dark:hawa-text-white ";
+  return /* @__PURE__ */ React29.createElement(
+    "div",
+    {
+      className: cn(
+        defaultStyle,
+        marginStyles[margin],
+        widthStyles[width],
+        props.className
+      )
+    },
+    props.label && /* @__PURE__ */ React29.createElement(Label, null, props.label),
+    props.isLoading ? /* @__PURE__ */ React29.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.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",
+          preview ? "hawa-opacity-100" : "hawa-opacity-0"
+        )
+      }
+    ), /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("div", { className: cn("hawa-relative") }, props.icon && /* @__PURE__ */ React29.createElement("div", { className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.icon), /* @__PURE__ */ React29.createElement(
+      "input",
+      {
+        ...props,
+        className: cn(
+          defaultInputStyle,
+          props.icon && "hawa-pl-10",
+          "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
+          preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0"
+        ),
+        disabled: preview
+      }
+    )), props.iconInside && /* @__PURE__ */ React29.createElement("div", { className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2" }, props.iconInside), props.helperText && /* @__PURE__ */ React29.createElement("p", { className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)))
+  );
+};
+
+// components/elements/Tabs.tsx
+import * as React30 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+var TabsContext = React30.createContext({ orientation: "vertical" });
+var Tabs = React30.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React30.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React30.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
+));
+Tabs.displayName = TabsPrimitive.Root.displayName;
+var TabsList = React30.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = React30.useContext(TabsContext);
+  console.log("orient ", orientation);
+  return /* @__PURE__ */ React30.createElement(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+        orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React30.createElement(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React30.createElement(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "hawa-w-full hawa-ring-offset-hawa-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 export {
   ActionCard,
   Alert,
@@ -3948,6 +4065,7 @@ export {
   DialogTrigger,
   DropdownMenu,
   FileDropzone,
+  Input,
   Label,
   Loading,
   PhoneInput,
@@ -3958,6 +4076,10 @@ export {
   Skeleton,
   Slider,
   Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Textarea,
   Toast,
   ToastAction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.2.42-next",
+  "version": "0.2.43-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -32,6 +32,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@types/node": "20.8.0",