@sikka/hawa 0.2.47-next → 0.2.48-next

package/dist/index.css

@@ -886,6 +886,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[0\.8px\] {
   height: 0.8px;
 }
+.hawa-h-\[1\.2rem\] {
+  height: 1.2rem;
+}
 .hawa-h-\[16px\] {
   height: 16px;
 }
@@ -1017,6 +1020,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-w-9 {
   width: 2.25rem;
 }
+.hawa-w-\[1\.2rem\] {
+  width: 1.2rem;
+}
 .hawa-w-\[100px\] {
   width: 100px;
 }
@@ -1138,10 +1144,19 @@ 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-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));
+}
 .hawa-rotate-180 {
   --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-scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 @keyframes hawa-bounce {
 
   0%, 100% {
@@ -2619,6 +2634,19 @@ body {
 .data-\[state\=open\]\:hawa-slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
+:is(.hawa-dark .dark\: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));
+}
+:is(.hawa-dark .dark\: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));
+}
+:is(.hawa-dark .dark\:hawa-scale-100) {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 :is(.hawa-dark .dark\:hawa-border-gray-700) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));

package/dist/index.d.mts

@@ -15,6 +15,9 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
@@ -499,7 +502,7 @@ type SelectTypes = {
     helperText?: any;
     onInputChange?: any;
     native?: any;
-    width?: "full" | "small";
+    width?: "full" | "small" | "fit";
     value?: any;
     children?: any;
     getOptionLabel?: any;
@@ -513,4 +516,33 @@ type SelectTypes = {
 };
 declare const Select: FC<SelectTypes>;
 
-export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Input, Label, Loading, Logos, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioOptionsTypes, ScrollArea, ScrollBar, Select, Separator, Skeleton, Slider, SubItem, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants };
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    error?: react_hook_form.FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+type TypographyTypes = {
+    handleLanguage: (e: any) => void;
+    currentLanguage: any;
+    handleColorMode: (e: any) => void;
+    currentColorMode: any;
+    orientation?: "vertical" | "horizontal";
+    width?: "default" | "full";
+};
+declare const InterfaceSettings: FC<TypographyTypes>;
+
+export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, InterfaceSettings, Label, Loading, Logos, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioOptionsTypes, ScrollArea, ScrollBar, Select, Separator, Skeleton, Slider, SubItem, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants, useFormField };

package/dist/index.d.ts

@@ -15,6 +15,9 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
@@ -499,7 +502,7 @@ type SelectTypes = {
     helperText?: any;
     onInputChange?: any;
     native?: any;
-    width?: "full" | "small";
+    width?: "full" | "small" | "fit";
     value?: any;
     children?: any;
     getOptionLabel?: any;
@@ -513,4 +516,33 @@ type SelectTypes = {
 };
 declare const Select: FC<SelectTypes>;
 
-export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Input, Label, Loading, Logos, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioOptionsTypes, ScrollArea, ScrollBar, Select, Separator, Skeleton, Slider, SubItem, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants };
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    error?: react_hook_form.FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+type TypographyTypes = {
+    handleLanguage: (e: any) => void;
+    currentLanguage: any;
+    handleColorMode: (e: any) => void;
+    currentColorMode: any;
+    orientation?: "vertical" | "horizontal";
+    width?: "default" | "full";
+};
+declare const InterfaceSettings: FC<TypographyTypes>;
+
+export { ActionCard, Alert, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, InterfaceSettings, Label, Loading, Logos, MenuItemType, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioOptionsTypes, ScrollArea, ScrollBar, Select, Separator, Skeleton, Slider, SubItem, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, buttonVariants, useFormField };

package/dist/index.js

@@ -320,9 +320,33 @@ __export(components_exports, {
     FileDropzone: function() {
         return FileDropzone;
     },
+    Form: function() {
+        return Form;
+    },
+    FormControl: function() {
+        return FormControl;
+    },
+    FormDescription: function() {
+        return FormDescription;
+    },
+    FormField: function() {
+        return FormField;
+    },
+    FormItem: function() {
+        return FormItem;
+    },
+    FormLabel: function() {
+        return FormLabel;
+    },
+    FormMessage: function() {
+        return FormMessage;
+    },
     Input: function() {
         return Input;
     },
+    InterfaceSettings: function() {
+        return InterfaceSettings;
+    },
     Label: function() {
         return Label;
     },
@@ -418,6 +442,9 @@ __export(components_exports, {
     },
     buttonVariants: function() {
         return buttonVariants;
+    },
+    useFormField: function() {
+        return useFormField;
     }
 });
 module.exports = __toCommonJS(components_exports);
@@ -1458,7 +1485,7 @@ var Alert = function(_param) {
             }, 200);
         }
     }, /* @__PURE__ */ import_react10.default.createElement("span", {
-        className: "sr-only"
+        className: "hawa-sr-only"
     }, "Close"), /* @__PURE__ */ import_react10.default.createElement("svg", {
         "aria-label": "Close Icon",
         "aria-hidden": "true",
@@ -3824,10 +3851,10 @@ var Input = function(_param) {
         full: "hawa-w-full",
         auto: ""
     };
-    var defaultStyle = "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-2";
+    var defaultStyle = "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
     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_react15.default.createElement("div", {
-        className: cn(defaultStyle, marginStyles[margin], widthStyles[width], props.containerClassName, "hawa-w-full")
+        className: cn(defaultStyle, marginStyles[margin], widthStyles[width], props.containerClassName, "hawa-w-full hawa-gap-2")
     }, props.label && /* @__PURE__ */ import_react15.default.createElement(Label, null, props.label), props.isLoading ? /* @__PURE__ */ import_react15.default.createElement(Skeleton, {
         className: "hawa-h-[38px] hawa-w-full"
     }) : /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("div", {
@@ -3838,13 +3865,16 @@ var Input = function(_param) {
         className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2"
     }, props.icon), /* @__PURE__ */ import_react15.default.createElement("input", {
         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-0", preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0", (_props_inputProps = props.inputProps) === null || _props_inputProps === void 0 ? void 0 : _props_inputProps.className),
+        onChange: props.onChange,
+        autoComplete: props.autoComplete,
         value: props.value,
         defaultValue: props.defaultValue,
         type: props.type,
         placeholder: props.placeholder,
         disabled: preview,
         style: {
-            width: width === "auto" ? "auto" : "100%"
+            minWidth: "100%",
+            width: "auto"
         }
     })), props.iconInside && /* @__PURE__ */ import_react15.default.createElement("div", {
         className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2"
@@ -3901,14 +3931,14 @@ var Select = function(props) {
         return /* @__PURE__ */ import_react16.default.createElement("div", null, (_props_texts_noOptions = (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.noOptions) !== null && _props_texts_noOptions !== void 0 ? _props_texts_noOptions : "No Items Found");
     };
     return /* @__PURE__ */ import_react16.default.createElement("div", {
-        className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2"
+        className: cn("hawa-flex hawa-flex-col hawa-gap-2", props.width === "fit" ? "hawa-w-fit" : "hawa-w-full")
     }, props.label && /* @__PURE__ */ import_react16.default.createElement(Label, null, props.label), props.isLoading ? /* @__PURE__ */ import_react16.default.createElement(Skeleton, {
         className: "hawa-h-[38px] hawa-w-full"
     }) : !props.isCreatable ? /* @__PURE__ */ import_react16.default.createElement(import_react_select.default, {
         noOptionsMessage: NoOption,
         classNames: {
             control: function() {
-                return cn(" hawa-text-sm hawa-flex hawa-p-2 hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500", props.controlClassNames);
+                return cn(" hawa-text-sm hawa-flex hawa-p-2 hawa-w-full  hawa-rounded hawa-border hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500", props.controlClassNames);
             },
             container: function() {
                 return cn("hawa-rounded", props.containerClassNames, props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer");
@@ -4008,6 +4038,7 @@ var PhoneInput = function(props) {
         dir: "ltr",
         className: "hawa-flex hawa-flex-row hawa-w-full "
     }, /* @__PURE__ */ import_react17.default.createElement(Select, {
+        width: "fit",
         controlClassNames: "hawa-rounded-r-none",
         containerClassNames: "hawa-w-[100px] hawa-p-0 hawa-rounded-r-none",
         options: countries_default,
@@ -4025,10 +4056,10 @@ var PhoneInput = function(props) {
         placeholder: "531045453",
         width: "auto",
         inputProps: {
-            className: "input-inside-input hawa-border-l-0 hawa-border-l-transparent hawa-rounded-l-none "
+            className: "hawa-w-full hawa-min-w-full hawa-border-l-0 hawa-border-l-transparent hawa-rounded-l-none "
         }
     }), props.helperText && /* @__PURE__ */ import_react17.default.createElement("p", {
-        className: "hawa-mb-1  hawa-mt-1 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
+        className: "hawa-mb-1   hawa-mt-1 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
     }, props.helperText)));
 };
 // components/elements/AppStores.tsx
@@ -4857,6 +4888,177 @@ function Combobox() {
         }), framework.label);
     })))));
 }
+// components/elements/Form.tsx
+var React38 = __toESM(require("react"));
+var import_react_hook_form = require("react-hook-form");
+var Form = import_react_hook_form.FormProvider;
+var FormFieldContext = React38.createContext({});
+var FormField = function(_param) {
+    var props = _extends({}, _object_destructuring_empty(_param));
+    return /* @__PURE__ */ React38.createElement(FormFieldContext.Provider, {
+        value: {
+            name: props.name
+        }
+    }, /* @__PURE__ */ React38.createElement(import_react_hook_form.Controller, _object_spread({}, props)));
+};
+var useFormField = function() {
+    var fieldContext = React38.useContext(FormFieldContext);
+    var itemContext = React38.useContext(FormItemContext);
+    var _ref = (0, import_react_hook_form.useFormContext)(), getFieldState = _ref.getFieldState, formState = _ref.formState;
+    var fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    var id = itemContext.id;
+    return _object_spread({
+        id: id,
+        name: fieldContext.name,
+        formItemId: "".concat(id, "-form-item"),
+        formDescriptionId: "".concat(id, "-form-item-description"),
+        formMessageId: "".concat(id, "-form-item-message")
+    }, fieldState);
+};
+var FormItemContext = React38.createContext({});
+var FormItem = React38.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    var id = React38.useId();
+    return /* @__PURE__ */ React38.createElement(FormItemContext.Provider, {
+        value: {
+            id: id
+        }
+    }, /* @__PURE__ */ React38.createElement("div", _object_spread({
+        ref: ref,
+        className: cn("space-y-2", className)
+    }, props)));
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React38.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    var _useFormField = useFormField(), error = _useFormField.error, formItemId = _useFormField.formItemId;
+    return /* @__PURE__ */ React38.createElement(Label, _object_spread({
+        ref: ref,
+        className: cn(error && "text-destructive", className),
+        htmlFor: formItemId
+    }, props));
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React38.forwardRef(function(_param, ref) {
+    var props = _extends({}, _object_destructuring_empty(_param));
+    var _useFormField = useFormField(), error = _useFormField.error, formItemId = _useFormField.formItemId, formDescriptionId = _useFormField.formDescriptionId, formMessageId = _useFormField.formMessageId;
+    return /* @__PURE__ */ React38.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, _object_spread({
+        ref: ref,
+        id: formItemId,
+        "aria-describedby": !error ? "".concat(formDescriptionId) : "".concat(formDescriptionId, " ").concat(formMessageId),
+        "aria-invalid": !!error
+    }, props));
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React38.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    var formDescriptionId = useFormField().formDescriptionId;
+    return /* @__PURE__ */ React38.createElement("p", _object_spread({
+        ref: ref,
+        id: formDescriptionId,
+        className: cn("text-sm text-muted-foreground", className)
+    }, props));
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React38.forwardRef(function(_param, ref) {
+    var className = _param.className, children = _param.children, props = _object_without_properties(_param, [
+        "className",
+        "children"
+    ]);
+    var _useFormField = useFormField(), error = _useFormField.error, formMessageId = _useFormField.formMessageId;
+    var body = error ? String(error === null || error === void 0 ? void 0 : error.message) : children;
+    if (!body) {
+        return null;
+    }
+    return /* @__PURE__ */ React38.createElement("p", _object_spread({
+        ref: ref,
+        id: formMessageId,
+        className: cn("text-sm font-medium text-destructive", className)
+    }, props), body);
+});
+FormMessage.displayName = "FormMessage";
+// components/elements/InterfaceSettings.tsx
+var import_react25 = __toESM(require("react"));
+var InterfaceSettings = function(_param) {
+    var _param_orientation = _param.orientation, orientation = _param_orientation === void 0 ? "horizontal" : _param_orientation, _param_width = _param.width, width = _param_width === void 0 ? "default" : _param_width, props = _object_without_properties(_param, [
+        "orientation",
+        "width"
+    ]);
+    var _ref = _sliced_to_array((0, import_react25.useState)(props.currentColorMode), 2), color = _ref[0], setColor = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react25.useState)(props.currentLanguage), 2), language = _ref1[0], setLanguage = _ref1[1];
+    var orientationStyle = {
+        horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
+        vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
+    };
+    return /* @__PURE__ */ import_react25.default.createElement("div", {
+        className: cn(orientationStyle[orientation])
+    }, /* @__PURE__ */ import_react25.default.createElement(Radio, {
+        width: width,
+        defaultValue: language,
+        onChangeTab: function(e) {
+            props.handleLanguage(e);
+            setLanguage(e);
+        },
+        design: "tabs",
+        options: [
+            {
+                value: "ar",
+                label: "عربي"
+            },
+            {
+                value: "en",
+                label: "English"
+            }
+        ]
+    }), /* @__PURE__ */ import_react25.default.createElement(Radio, {
+        width: width,
+        defaultValue: color,
+        onChangeTab: function(e) {
+            props.handleColorMode(e);
+            setColor(e);
+        },
+        design: "tabs",
+        options: [
+            {
+                value: "light",
+                label: /* @__PURE__ */ import_react25.default.createElement("svg", {
+                    width: "15",
+                    height: "15",
+                    viewBox: "0 0 15 15",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90"
+                }, /* @__PURE__ */ import_react25.default.createElement("path", {
+                    d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
+                    fill: "currentColor"
+                }))
+            },
+            {
+                value: "dark",
+                label: /* @__PURE__ */ import_react25.default.createElement("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    className: "hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100"
+                }, /* @__PURE__ */ import_react25.default.createElement("path", {
+                    d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"
+                }))
+            }
+        ]
+    }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     ActionCard: ActionCard,
@@ -4894,7 +5096,15 @@ function Combobox() {
     DialogTrigger: DialogTrigger,
     DropdownMenu: DropdownMenu,
     FileDropzone: FileDropzone,
+    Form: Form,
+    FormControl: FormControl,
+    FormDescription: FormDescription,
+    FormField: FormField,
+    FormItem: FormItem,
+    FormLabel: FormLabel,
+    FormMessage: FormMessage,
     Input: Input,
+    InterfaceSettings: InterfaceSettings,
     Label: Label,
     Loading: Loading,
     Logos: Logos,
@@ -4926,5 +5136,6 @@ function Combobox() {
     ToastViewport: ToastViewport,
     Toaster: Toaster,
     Tooltip: Tooltip,
-    buttonVariants: buttonVariants
+    buttonVariants: buttonVariants,
+    useFormField: useFormField
 });

package/dist/index.mjs

@@ -1232,7 +1232,7 @@ var Alert = ({
           }, 200);
         }
       },
-      /* @__PURE__ */ React17.createElement("span", { className: "sr-only" }, "Close"),
+      /* @__PURE__ */ React17.createElement("span", { className: "hawa-sr-only" }, "Close"),
       /* @__PURE__ */ React17.createElement(
         "svg",
         {
@@ -3700,7 +3700,7 @@ var Input = ({
     full: "hawa-w-full",
     auto: ""
   };
-  let defaultStyle = "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-2";
+  let defaultStyle = "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
   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__ */ React26.createElement(
     "div",
@@ -3710,7 +3710,7 @@ var Input = ({
         marginStyles[margin],
         widthStyles[width],
         props.containerClassName,
-        "hawa-w-full"
+        "hawa-w-full hawa-gap-2"
       )
     },
     props.label && /* @__PURE__ */ React26.createElement(Label, null, props.label),
@@ -3732,12 +3732,14 @@ var Input = ({
           preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
           props.inputProps?.className
         ),
+        onChange: props.onChange,
+        autoComplete: props.autoComplete,
         value: props.value,
         defaultValue: props.defaultValue,
         type: props.type,
         placeholder: props.placeholder,
         disabled: preview,
-        style: { width: width === "auto" ? "auto" : "100%" }
+        style: { minWidth: "100%", width: "auto" }
       }
     )), props.iconInside && /* @__PURE__ */ React26.createElement("div", { className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2" }, props.iconInside), props.helperText && /* @__PURE__ */ React26.createElement("p", { className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)))
   );
@@ -3810,76 +3812,87 @@ var Select = (props) => {
   const NoOption = () => {
     return /* @__PURE__ */ React27.createElement("div", null, props.texts?.noOptions ?? "No Items Found");
   };
-  return /* @__PURE__ */ React27.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React27.createElement(Label, null, props.label), props.isLoading ? /* @__PURE__ */ React27.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : !props.isCreatable ? /* @__PURE__ */ React27.createElement(
-    ReactSelect,
-    {
-      noOptionsMessage: NoOption,
-      classNames: {
-        control: () => cn(
-          " hawa-text-sm hawa-flex hawa-p-2 hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500",
-          props.controlClassNames
-        ),
-        container: () => cn(
-          "hawa-rounded",
-          props.containerClassNames,
-          props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
-        ),
-        //   TODO: enable keyboard to go to the next item in the list
-        placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
-        input: () => "hawa-text-primary hawa-px-2",
-        valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
-        singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
-        indicatorsContainer: () => " hawa-px-0 hawa-cursor-pointer hawa-text-muted-foreground"
-      },
-      unstyled: true,
-      isDisabled: props.disabled,
-      options: props.options,
-      defaultValue: props.defaultValue,
-      isClearable: props.isClearable,
-      isMulti: props.isMulti,
-      isSearchable: props.isSearchable,
-      autoFocus: true,
-      onChange: (newValue, action) => (
-        // props.onChange(newValue.label, action)
-        props.onChange(newValue, action)
-      ),
-      components: {
-        // Control,
-        Option,
-        Menu
-      },
-      getOptionLabel: props.getOptionLabel
-    }
-  ) : /* @__PURE__ */ React27.createElement(
-    CreatableSelect,
+  return /* @__PURE__ */ React27.createElement(
+    "div",
     {
-      formatCreateLabel: (inputValue) => `${props.texts?.createLabel ?? "Create"} "${inputValue}"`,
-      classNames: {
-        container: () => cn(
-          "hawa-rounded ",
-          props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+      className: cn(
+        "hawa-flex hawa-flex-col hawa-gap-2",
+        props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
+      )
+    },
+    props.label && /* @__PURE__ */ React27.createElement(Label, null, props.label),
+    props.isLoading ? /* @__PURE__ */ React27.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : !props.isCreatable ? /* @__PURE__ */ React27.createElement(
+      ReactSelect,
+      {
+        noOptionsMessage: NoOption,
+        classNames: {
+          control: () => cn(
+            " hawa-text-sm hawa-flex hawa-p-2 hawa-w-full  hawa-rounded hawa-border hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500",
+            props.controlClassNames
+          ),
+          container: () => cn(
+            "hawa-rounded",
+            props.containerClassNames,
+            props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+          ),
+          //   TODO: enable keyboard to go to the next item in the list
+          placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
+          input: () => "hawa-text-primary hawa-px-2",
+          valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
+          singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
+          indicatorsContainer: () => " hawa-px-0 hawa-cursor-pointer hawa-text-muted-foreground"
+        },
+        unstyled: true,
+        isDisabled: props.disabled,
+        options: props.options,
+        defaultValue: props.defaultValue,
+        isClearable: props.isClearable,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable,
+        autoFocus: true,
+        onChange: (newValue, action) => (
+          // props.onChange(newValue.label, action)
+          props.onChange(newValue, action)
         ),
-        placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
-        input: () => "hawa-text-primary hawa-px-2",
-        valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
-        singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
-        indicatorsContainer: () => " hawa-px-2 hawa-cursor-pointer hawa-text-muted-foreground"
-      },
-      unstyled: true,
-      options: props.options,
-      isClearable: props.isClearable,
-      isMulti: props.isMulti,
-      isSearchable: props.isSearchable,
-      onCreateOption: () => console.log("im changing"),
-      onChange: (newValue, action) => props.onChange(newValue, action),
-      onInputChange: (newValue, action) => props.onInputChange(newValue, action),
-      components: {
-        Control,
-        Option,
-        Menu
+        components: {
+          // Control,
+          Option,
+          Menu
+        },
+        getOptionLabel: props.getOptionLabel
       }
-    }
-  ), props.helperText && /* @__PURE__ */ React27.createElement("p", { className: "hawa-mt-2 hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText));
+    ) : /* @__PURE__ */ React27.createElement(
+      CreatableSelect,
+      {
+        formatCreateLabel: (inputValue) => `${props.texts?.createLabel ?? "Create"} "${inputValue}"`,
+        classNames: {
+          container: () => cn(
+            "hawa-rounded ",
+            props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+          ),
+          placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
+          input: () => "hawa-text-primary hawa-px-2",
+          valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
+          singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
+          indicatorsContainer: () => " hawa-px-2 hawa-cursor-pointer hawa-text-muted-foreground"
+        },
+        unstyled: true,
+        options: props.options,
+        isClearable: props.isClearable,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable,
+        onCreateOption: () => console.log("im changing"),
+        onChange: (newValue, action) => props.onChange(newValue, action),
+        onInputChange: (newValue, action) => props.onInputChange(newValue, action),
+        components: {
+          Control,
+          Option,
+          Menu
+        }
+      }
+    ),
+    props.helperText && /* @__PURE__ */ React27.createElement("p", { className: "hawa-mt-2 hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)
+  );
 };
 
 // components/elements/PhoneInput.tsx
@@ -3888,6 +3901,7 @@ var PhoneInput = (props) => {
   return /* @__PURE__ */ React28.createElement("div", { className: "hawa-mb-3 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ React28.createElement("label", { className: "hawa-mb-2 hawa-block hawa-text-sm hawa-font-medium" }, props.label), /* @__PURE__ */ React28.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full " }, /* @__PURE__ */ React28.createElement(
     Select,
     {
+      width: "fit",
       controlClassNames: "hawa-rounded-r-none",
       containerClassNames: "hawa-w-[100px] hawa-p-0 hawa-rounded-r-none",
       options: countries_default,
@@ -3906,10 +3920,10 @@ var PhoneInput = (props) => {
       placeholder: "531045453",
       width: "auto",
       inputProps: {
-        className: "input-inside-input hawa-border-l-0 hawa-border-l-transparent hawa-rounded-l-none "
+        className: "hawa-w-full hawa-min-w-full hawa-border-l-0 hawa-border-l-transparent hawa-rounded-l-none "
       }
     }
-  ), props.helperText && /* @__PURE__ */ React28.createElement("p", { className: "hawa-mb-1  hawa-mt-1 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)));
+  ), props.helperText && /* @__PURE__ */ React28.createElement("p", { className: "hawa-mb-1   hawa-mt-1 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)));
 };
 
 // components/elements/AppStores.tsx
@@ -4761,6 +4775,188 @@ function Combobox() {
     framework.label
   ))))));
 }
+
+// components/elements/Form.tsx
+import * as React38 from "react";
+import {
+  Controller,
+  FormProvider,
+  useFormContext
+} from "react-hook-form";
+var Form = FormProvider;
+var FormFieldContext = React38.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ React38.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React38.createElement(Controller, { ...props }));
+};
+var useFormField = () => {
+  const fieldContext = React38.useContext(FormFieldContext);
+  const itemContext = React38.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React38.createContext(
+  {}
+);
+var FormItem = React38.forwardRef(({ className, ...props }, ref) => {
+  const id = React38.useId();
+  return /* @__PURE__ */ React38.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React38.createElement("div", { ref, className: cn("space-y-2", className), ...props }));
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React38.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ React38.createElement(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React38.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ React38.createElement(
+    $5e63c961fc1ce211$export$8c6ed5c666ac1360,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React38.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ React38.createElement(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React38.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React38.createElement(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props
+    },
+    body
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+// components/elements/InterfaceSettings.tsx
+import React39, { useState as useState14 } from "react";
+var InterfaceSettings = ({
+  orientation = "horizontal",
+  width = "default",
+  ...props
+}) => {
+  const [color, setColor] = useState14(props.currentColorMode);
+  const [language, setLanguage] = useState14(props.currentLanguage);
+  let orientationStyle = {
+    horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
+    vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
+  };
+  return /* @__PURE__ */ React39.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React39.createElement(
+    Radio,
+    {
+      width,
+      defaultValue: language,
+      onChangeTab: (e) => {
+        props.handleLanguage(e);
+        setLanguage(e);
+      },
+      design: "tabs",
+      options: [
+        { value: "ar", label: "\u0639\u0631\u0628\u064A" },
+        { value: "en", label: "English" }
+      ]
+    }
+  ), /* @__PURE__ */ React39.createElement(
+    Radio,
+    {
+      width,
+      defaultValue: color,
+      onChangeTab: (e) => {
+        props.handleColorMode(e);
+        setColor(e);
+      },
+      design: "tabs",
+      options: [
+        {
+          value: "light",
+          label: /* @__PURE__ */ React39.createElement(
+            "svg",
+            {
+              width: "15",
+              height: "15",
+              viewBox: "0 0 15 15",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90"
+            },
+            /* @__PURE__ */ React39.createElement(
+              "path",
+              {
+                d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
+                fill: "currentColor"
+              }
+            )
+          )
+        },
+        {
+          value: "dark",
+          label: /* @__PURE__ */ React39.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              className: "hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100"
+            },
+            /* @__PURE__ */ React39.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          )
+        }
+      ]
+    }
+  ));
+};
 export {
   ActionCard,
   Alert,
@@ -4797,7 +4993,15 @@ export {
   DialogTrigger,
   DropdownMenu,
   FileDropzone,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input,
+  InterfaceSettings,
   Label,
   Loading,
   Logos,
@@ -4829,5 +5033,6 @@ export {
   ToastViewport,
   Toaster,
   Tooltip,
-  buttonVariants
+  buttonVariants,
+  useFormField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.2.47-next",
+  "version": "0.2.48-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -25,6 +25,7 @@
     "pub": "npm publish --tag next"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -54,7 +55,8 @@
     "react-hook-form": "^7.47.0",
     "react-select": "^5.7.7",
     "tailwind-merge": "^1.14.0",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "zod": "^3.22.3"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.4.5",