@sikka/hawa 0.8.1-next → 0.8.4-next

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +7 -0
  2. package/dist/index.d.mts +9 -2
  3. package/dist/index.d.ts +9 -2
  4. package/dist/index.js +189 -112
  5. package/dist/index.mjs +188 -115
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1506,6 +1506,10 @@ input[type="number"]::-webkit-inner-spin-button,
1506
1506
  .hawa-gap-6 {
1507
1507
  gap: 1.5rem;
1508
1508
  }
1509
+ .hawa-gap-x-10 {
1510
+ -moz-column-gap: 2.5rem;
1511
+ column-gap: 2.5rem;
1512
+ }
1509
1513
  .hawa-gap-x-16 {
1510
1514
  -moz-column-gap: 4rem;
1511
1515
  column-gap: 4rem;
@@ -1676,6 +1680,9 @@ input[type="number"]::-webkit-inner-spin-button,
1676
1680
  .hawa-border-l-0 {
1677
1681
  border-left-width: 0px;
1678
1682
  }
1683
+ .hawa-border-r {
1684
+ border-right-width: 1px;
1685
+ }
1679
1686
  .hawa-border-t {
1680
1687
  border-top-width: 1px;
1681
1688
  }
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React$1 from 'react';
2
- import React__default, { FC, ReactNode, ChangeEvent, RefObject, PropsWithRef } from 'react';
2
+ import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, RefObject, PropsWithRef } from 'react';
3
3
  import * as class_variance_authority_types from 'class-variance-authority/types';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
  import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -102,6 +102,7 @@ declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttribute
102
102
  declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
103
103
  declare const CardContent: React$1.ForwardRefExoticComponent<{
104
104
  headless?: boolean | undefined;
105
+ noPadding?: boolean | undefined;
105
106
  } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
106
107
  declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
107
108
 
@@ -334,6 +335,11 @@ type ColorPickerTypes = {
334
335
  color?: any;
335
336
  /** Fires everytime the color changes */
336
337
  handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
338
+ colorPickerClassNames?: string;
339
+ colorTextClassNames?: string;
340
+ colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
341
+ textInputProps?: InputHTMLAttributes<HTMLInputElement>;
342
+ containerProps?: InputHTMLAttributes<HTMLDivElement>;
337
343
  };
338
344
  declare const ColorPicker: FC<ColorPickerTypes>;
339
345
 
@@ -876,7 +882,7 @@ type LoginFormTypes = {
876
882
  /** Description text of error alert. */
877
883
  errorText?: string;
878
884
  /** Login identifier type user will use to log in. */
879
- loginType?: "email" | "username" | "phone";
885
+ loginType?: "email" | "username" | "phone" | "link";
880
886
  /** If true, the reset password option is hidden. */
881
887
  withoutResetPassword?: boolean;
882
888
  /** If true, the register option is hidden. */
@@ -907,6 +913,7 @@ type LoginFormTypes = {
907
913
  handleGithubLogin?: () => void;
908
914
  /** Function to handle Twitter login. */
909
915
  handleTwitterLogin?: () => void;
916
+ additionalButtons?: any;
910
917
  };
911
918
  declare const LoginForm: FC<LoginFormTypes>;
912
919
 
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React$1 from 'react';
2
- import React__default, { FC, ReactNode, ChangeEvent, RefObject, PropsWithRef } from 'react';
2
+ import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, RefObject, PropsWithRef } from 'react';
3
3
  import * as class_variance_authority_types from 'class-variance-authority/types';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
  import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -102,6 +102,7 @@ declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttribute
102
102
  declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
103
103
  declare const CardContent: React$1.ForwardRefExoticComponent<{
104
104
  headless?: boolean | undefined;
105
+ noPadding?: boolean | undefined;
105
106
  } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
106
107
  declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
107
108
 
@@ -334,6 +335,11 @@ type ColorPickerTypes = {
334
335
  color?: any;
335
336
  /** Fires everytime the color changes */
336
337
  handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
338
+ colorPickerClassNames?: string;
339
+ colorTextClassNames?: string;
340
+ colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
341
+ textInputProps?: InputHTMLAttributes<HTMLInputElement>;
342
+ containerProps?: InputHTMLAttributes<HTMLDivElement>;
337
343
  };
338
344
  declare const ColorPicker: FC<ColorPickerTypes>;
339
345
 
@@ -876,7 +882,7 @@ type LoginFormTypes = {
876
882
  /** Description text of error alert. */
877
883
  errorText?: string;
878
884
  /** Login identifier type user will use to log in. */
879
- loginType?: "email" | "username" | "phone";
885
+ loginType?: "email" | "username" | "phone" | "link";
880
886
  /** If true, the reset password option is hidden. */
881
887
  withoutResetPassword?: boolean;
882
888
  /** If true, the register option is hidden. */
@@ -907,6 +913,7 @@ type LoginFormTypes = {
907
913
  handleGithubLogin?: () => void;
908
914
  /** Function to handle Twitter login. */
909
915
  handleTwitterLogin?: () => void;
916
+ additionalButtons?: any;
910
917
  };
911
918
  declare const LoginForm: FC<LoginFormTypes>;
912
919
 
package/dist/index.js CHANGED
@@ -1028,13 +1028,14 @@ var CardDescription = React5.forwardRef(function(_param, ref) /* @__PURE__ */ {
1028
1028
  });
1029
1029
  CardDescription.displayName = "CardDescription";
1030
1030
  var CardContent = React5.forwardRef(function(_param, ref) /* @__PURE__ */ {
1031
- var headless = _param.headless, className = _param.className, props = _object_without_properties(_param, [
1031
+ var headless = _param.headless, noPadding = _param.noPadding, className = _param.className, props = _object_without_properties(_param, [
1032
1032
  "headless",
1033
+ "noPadding",
1033
1034
  "className"
1034
1035
  ]);
1035
1036
  return React5.createElement("div", _object_spread({
1036
1037
  ref: ref,
1037
- className: cn("hawa-p-6", headless ? "hawa-pt-6" : "hawa-pt-0", className)
1038
+ className: cn(noPadding ? "hawa-p-0" : "hawa-p-6", headless ? "hawa-pt-6" : "hawa-pt-0", className)
1038
1039
  }, props));
1039
1040
  });
1040
1041
  CardContent.displayName = "CardContent";
@@ -2336,16 +2337,21 @@ var DropdownMenu = function(param) {
2336
2337
  };
2337
2338
  // components/elements/ColorPicker.tsx
2338
2339
  var import_react14 = __toESM(require("react"));
2339
- var ColorPicker = function(props) {
2340
+ var ColorPicker = function(_param) {
2341
+ var containerProps = _param.containerProps, colorPickerProps = _param.colorPickerProps, textInputProps = _param.textInputProps, props = _object_without_properties(_param, [
2342
+ "containerProps",
2343
+ "colorPickerProps",
2344
+ "textInputProps"
2345
+ ]);
2340
2346
  var _ref = _sliced_to_array((0, import_react14.useState)(props.color), 2), selectedColor = _ref[0], setSelectedColor = _ref[1];
2341
2347
  return /* @__PURE__ */ import_react14.default.createElement("div", {
2342
- className: "hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0"
2348
+ className: cn("hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className)
2343
2349
  }, /* @__PURE__ */ import_react14.default.createElement("div", {
2344
2350
  style: {
2345
2351
  backgroundColor: selectedColor
2346
2352
  },
2347
- className: "hawa-rounded-bl-lg hawa-rounded-tl-lg"
2348
- }, /* @__PURE__ */ import_react14.default.createElement("input", {
2353
+ className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border-r"
2354
+ }, /* @__PURE__ */ import_react14.default.createElement("input", _object_spread({
2349
2355
  type: "color",
2350
2356
  value: selectedColor,
2351
2357
  onChange: function(e) {
@@ -2354,8 +2360,8 @@ var ColorPicker = function(props) {
2354
2360
  props.handleChange(e);
2355
2361
  }
2356
2362
  },
2357
- className: "hawa-opacity-0"
2358
- })), /* @__PURE__ */ import_react14.default.createElement("input", {
2363
+ className: cn("hawa-opacity-0", props.colorPickerClassNames)
2364
+ }, colorPickerProps))), /* @__PURE__ */ import_react14.default.createElement("input", _object_spread({
2359
2365
  type: "text",
2360
2366
  onChange: function(e) {
2361
2367
  setSelectedColor(e.target.value);
@@ -2364,8 +2370,8 @@ var ColorPicker = function(props) {
2364
2370
  }
2365
2371
  },
2366
2372
  value: selectedColor,
2367
- className: "hawa-w-24 hawa-bg-background hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2"
2368
- }));
2373
+ className: cn("hawa-w-24 hawa-bg-background hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2", props.colorTextClassNames)
2374
+ }, textInputProps)));
2369
2375
  };
2370
2376
  // components/elements/PinInput.tsx
2371
2377
  var import_react15 = __toESM(require("react"));
@@ -6239,7 +6245,9 @@ var AccordionContent2 = React49.forwardRef(function(_param, ref) /* @__PURE__ */
6239
6245
  AccordionContent2.displayName = AccordionPrimitive2.Content.displayName;
6240
6246
  var SidebarGroup = function(param) {
6241
6247
  var title = param.title, items = param.items, selectedItem = param.selectedItem, openedItem = param.openedItem, setOpenedItem = param.setOpenedItem, onItemClick = param.onItemClick, onSubItemClick = param.onSubItemClick, direction = param.direction, isOpen = param.isOpen;
6242
- return /* @__PURE__ */ React49.createElement("div", null, title && /* @__PURE__ */ React49.createElement("h3", {
6248
+ return /* @__PURE__ */ React49.createElement("div", {
6249
+ className: "hawa-m-2"
6250
+ }, title && /* @__PURE__ */ React49.createElement("h3", {
6243
6251
  className: "hawa-mb-1 hawa-font-bold"
6244
6252
  }, title), /* @__PURE__ */ React49.createElement("ul", {
6245
6253
  className: "hawa-flex hawa-flex-col hawa-gap-2"
@@ -6286,7 +6294,7 @@ var SidebarItem = function(_param) {
6286
6294
  showArrow: isOpen
6287
6295
  }, /* @__PURE__ */ React49.createElement("div", {
6288
6296
  className: cn(!isOpen && "hawa-py-1", "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2")
6289
- }, item.icon, isOpen && /* @__PURE__ */ React49.createElement("span", {
6297
+ }, item.icon && item.icon, /* @__PURE__ */ React49.createElement("span", {
6290
6298
  className: cn("hawa-transition-all ", isOpen ? "hawa-opacity-100" : "hawa-opacity-0")
6291
6299
  }, item.label))), item.subitems && /* @__PURE__ */ React49.createElement(AccordionContent2, {
6292
6300
  className: "hawa-mt-1 hawa-h-full hawa-rounded"
@@ -6309,7 +6317,7 @@ var SidebarItem = function(_param) {
6309
6317
  },
6310
6318
  className: cn("hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-rounded hawa-p-2 hawa-transition-all", // bg-foreground/10
6311
6319
  getSelectedStyle(subitem.value))
6312
- }, subitem.icon, subitem.label);
6320
+ }, subitem.icon && subitem.icon, subitem.label);
6313
6321
  }))));
6314
6322
  } else {
6315
6323
  return /* @__PURE__ */ React49.createElement("div", {
@@ -6327,7 +6335,7 @@ var SidebarItem = function(_param) {
6327
6335
  className: cn(triggerStyles, getSelectedStyle(item.value), "hawa-overflow-x-clip ")
6328
6336
  }, /* @__PURE__ */ React49.createElement("div", {
6329
6337
  className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2"
6330
- }, item.icon, /* @__PURE__ */ React49.createElement("span", {
6338
+ }, item.icon && item.icon, /* @__PURE__ */ React49.createElement("span", {
6331
6339
  className: cn("hawa-whitespace-nowrap hawa-transition-all", isOpen ? "hawa-opacity-100" : "hawa-opacity-0")
6332
6340
  }, item.label)));
6333
6341
  }
@@ -6516,7 +6524,7 @@ var AppLayout = function(_param) {
6516
6524
  design === "floating" ? isRTL ? "hawa-right-7.5 hawa-top-7" : "hawa-left-7.5 hawa-top-7" : isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5", openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100"),
6517
6525
  src: props.logoSymbol
6518
6526
  }) : null), /* @__PURE__ */ import_react31.default.createElement("div", {
6519
- className: cn("hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-2 hawa-py-2 hawa-transition-all", design === "floating" ? "hawa-top-[76px]" : "hawa-top-14", openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"),
6527
+ className: cn("hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-0 hawa-py-2 hawa-transition-all", design === "floating" ? "hawa-top-[76px]" : "hawa-top-14", openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"),
6520
6528
  style: {
6521
6529
  height: design === "floating" ? "calc(100% - 152px)" : "calc(100% - 112px)",
6522
6530
  width: size > 600 ? "".concat(openSideMenu ? openDrawerWidth : 56, "px") : "".concat(openSideMenu ? openDrawerWidth : 0, "px")
@@ -6611,52 +6619,66 @@ var import_react33 = __toESM(require("react"));
6611
6619
  var import_react_hook_form2 = require("react-hook-form");
6612
6620
  var import_zod = require("@hookform/resolvers/zod");
6613
6621
  var z = __toESM(require("zod"));
6614
- var LoginForm = function(props) {
6615
- var _props_texts, _props_texts1, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6;
6622
+ var LoginForm = function(_param) {
6623
+ var loginType = _param.loginType, props = _object_without_properties(_param, [
6624
+ "loginType"
6625
+ ]);
6626
+ var _props_texts, _props_texts1, _props_texts2, _props_texts3, _props_texts4, _props_texts5;
6616
6627
  var formSchema;
6617
- if (props.loginType === "email") {
6618
- var _props_texts7, _props_texts8, _props_texts9, _props_texts10, _props_texts11;
6628
+ if (loginType === "email") {
6629
+ var _props_texts6, _props_texts7, _props_texts8, _props_texts9, _props_texts10;
6619
6630
  formSchema = z.object({
6620
6631
  email: z.string({
6621
- required_error: (_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.emailRequiredText
6632
+ required_error: (_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.emailRequiredText
6622
6633
  }).nonempty({
6623
- message: (_props_texts8 = props.texts) === null || _props_texts8 === void 0 ? void 0 : _props_texts8.emailRequiredText
6634
+ message: (_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.emailRequiredText
6624
6635
  }).email({
6625
- message: (_props_texts9 = props.texts) === null || _props_texts9 === void 0 ? void 0 : _props_texts9.emailInvalidText
6636
+ message: (_props_texts8 = props.texts) === null || _props_texts8 === void 0 ? void 0 : _props_texts8.emailInvalidText
6626
6637
  }),
6627
6638
  password: z.string({
6628
- required_error: (_props_texts10 = props.texts) === null || _props_texts10 === void 0 ? void 0 : _props_texts10.passwordRequiredText
6639
+ required_error: (_props_texts9 = props.texts) === null || _props_texts9 === void 0 ? void 0 : _props_texts9.passwordRequiredText
6629
6640
  }).min(5, {
6630
6641
  message: "Password must be at least 5 characters long"
6631
6642
  }).nonempty({
6632
- message: (_props_texts11 = props.texts) === null || _props_texts11 === void 0 ? void 0 : _props_texts11.passwordRequiredText
6643
+ message: (_props_texts10 = props.texts) === null || _props_texts10 === void 0 ? void 0 : _props_texts10.passwordRequiredText
6633
6644
  })
6634
6645
  });
6635
- } else if (props.loginType === "username") {
6636
- var _props_texts12, _props_texts13, _props_texts14;
6646
+ } else if (loginType === "username") {
6647
+ var _props_texts11, _props_texts12, _props_texts13;
6637
6648
  formSchema = z.object({
6638
6649
  username: z.string().min(2, {
6639
6650
  message: "Username must be at least 2 characters"
6640
6651
  }).nonempty({
6641
- message: (_props_texts12 = props.texts) === null || _props_texts12 === void 0 ? void 0 : _props_texts12.usernameRequired
6652
+ message: (_props_texts11 = props.texts) === null || _props_texts11 === void 0 ? void 0 : _props_texts11.usernameRequired
6642
6653
  }),
6643
6654
  password: z.string({
6644
- required_error: (_props_texts13 = props.texts) === null || _props_texts13 === void 0 ? void 0 : _props_texts13.passwordRequiredText
6655
+ required_error: (_props_texts12 = props.texts) === null || _props_texts12 === void 0 ? void 0 : _props_texts12.passwordRequiredText
6645
6656
  }).min(5, {
6646
6657
  message: "Password must be at least 5 characters long"
6647
6658
  }).nonempty({
6648
- message: (_props_texts14 = props.texts) === null || _props_texts14 === void 0 ? void 0 : _props_texts14.passwordRequiredText
6659
+ message: (_props_texts13 = props.texts) === null || _props_texts13 === void 0 ? void 0 : _props_texts13.passwordRequiredText
6649
6660
  })
6650
6661
  });
6651
- } else if (props.loginType === "phone") {
6652
- var _props_texts15, _props_texts16;
6662
+ } else if (loginType === "phone") {
6663
+ var _props_texts14, _props_texts15;
6653
6664
  formSchema = z.object({
6654
6665
  phone: z.string({
6655
- required_error: (_props_texts15 = props.texts) === null || _props_texts15 === void 0 ? void 0 : _props_texts15.phoneRequiredText
6666
+ required_error: (_props_texts14 = props.texts) === null || _props_texts14 === void 0 ? void 0 : _props_texts14.phoneRequiredText
6656
6667
  }).refine(function(value) {
6657
6668
  return value.split("-")[1] !== "";
6658
6669
  }, {
6659
- message: (_props_texts16 = props.texts) === null || _props_texts16 === void 0 ? void 0 : _props_texts16.phoneRequiredText
6670
+ message: (_props_texts15 = props.texts) === null || _props_texts15 === void 0 ? void 0 : _props_texts15.phoneRequiredText
6671
+ })
6672
+ });
6673
+ } else if (loginType === "link") {
6674
+ var _props_texts16, _props_texts17, _props_texts18;
6675
+ formSchema = z.object({
6676
+ email: z.string({
6677
+ required_error: (_props_texts16 = props.texts) === null || _props_texts16 === void 0 ? void 0 : _props_texts16.emailRequiredText
6678
+ }).nonempty({
6679
+ message: (_props_texts17 = props.texts) === null || _props_texts17 === void 0 ? void 0 : _props_texts17.emailRequiredText
6680
+ }).email({
6681
+ message: (_props_texts18 = props.texts) === null || _props_texts18 === void 0 ? void 0 : _props_texts18.emailInvalidText
6660
6682
  })
6661
6683
  });
6662
6684
  } else {
@@ -6665,6 +6687,133 @@ var LoginForm = function(props) {
6665
6687
  var _ref = (0, import_react_hook_form2.useForm)({
6666
6688
  resolver: (0, import_zod.zodResolver)(formSchema)
6667
6689
  }), handleSubmit = _ref.handleSubmit, control = _ref.control, formState = _ref.formState;
6690
+ var renderFields = function() {
6691
+ switch(loginType){
6692
+ case "email":
6693
+ var _props_texts;
6694
+ return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6695
+ control: control,
6696
+ name: "email",
6697
+ render: function(param) /* @__PURE__ */ {
6698
+ var field = param.field;
6699
+ var _props_texts, _formState_errors_email, _props_texts1;
6700
+ var _field_value;
6701
+ return import_react33.default.createElement(Input, {
6702
+ width: "full",
6703
+ type: "text",
6704
+ autoComplete: "email",
6705
+ label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.emailLabel) || "Email",
6706
+ helperText: (_formState_errors_email = formState.errors.email) === null || _formState_errors_email === void 0 ? void 0 : _formState_errors_email.message,
6707
+ placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.emailPlaceholder) || "contact@sikka.io",
6708
+ value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : "",
6709
+ onChange: field.onChange
6710
+ });
6711
+ }
6712
+ }), /* @__PURE__ */ import_react33.default.createElement("div", null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6713
+ control: control,
6714
+ name: "password",
6715
+ render: function(param) /* @__PURE__ */ {
6716
+ var field = param.field;
6717
+ var _props_texts, _props_texts1, _formState_errors_password;
6718
+ var _field_value;
6719
+ return import_react33.default.createElement(Input, {
6720
+ width: "full",
6721
+ autoComplete: "current-password",
6722
+ type: "password",
6723
+ label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.passwordLabel) || "Password",
6724
+ placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.passwordPlaceholder) || "Enter your password",
6725
+ helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message,
6726
+ onChange: field.onChange,
6727
+ value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : ""
6728
+ });
6729
+ }
6730
+ }), !props.withoutResetPassword && /* @__PURE__ */ import_react33.default.createElement("div", {
6731
+ onClick: props.handleForgotPassword,
6732
+ className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-text-xs dark:hawa-text-gray-300"
6733
+ }, ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.forgotPasswordText) || "Forgot Password?")));
6734
+ case "username":
6735
+ var _props_texts1;
6736
+ return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6737
+ control: control,
6738
+ name: "username",
6739
+ render: function(param) {
6740
+ var field = param.field;
6741
+ var _props_texts, _formState_errors_username, _props_texts1;
6742
+ var _field_value;
6743
+ return /* @__PURE__ */ import_react33.default.createElement(Input, {
6744
+ width: "full",
6745
+ type: "text",
6746
+ autoComplete: "username",
6747
+ label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.usernameLabel) || "Username",
6748
+ helperText: (_formState_errors_username = formState.errors.username) === null || _formState_errors_username === void 0 ? void 0 : _formState_errors_username.message,
6749
+ placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.usernamePlaceholder) || "sikka_sa",
6750
+ onChange: field.onChange,
6751
+ value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : ""
6752
+ });
6753
+ }
6754
+ }), /* @__PURE__ */ import_react33.default.createElement("div", null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6755
+ control: control,
6756
+ name: "password",
6757
+ render: function(param) /* @__PURE__ */ {
6758
+ var field = param.field;
6759
+ var _props_texts, _props_texts1, _formState_errors_password;
6760
+ var _field_value;
6761
+ return import_react33.default.createElement(Input, {
6762
+ width: "full",
6763
+ autoComplete: "current-password",
6764
+ type: "password",
6765
+ label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.passwordLabel) || "Password",
6766
+ placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.passwordPlaceholder) || "Enter your password",
6767
+ helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message,
6768
+ onChange: field.onChange,
6769
+ value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : ""
6770
+ });
6771
+ }
6772
+ }), !props.withoutResetPassword && /* @__PURE__ */ import_react33.default.createElement("div", {
6773
+ onClick: props.handleForgotPassword,
6774
+ className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-text-xs dark:hawa-text-gray-300"
6775
+ }, ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.forgotPasswordText) || "Forgot Password?")));
6776
+ case "phone":
6777
+ return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6778
+ control: control,
6779
+ name: "phone",
6780
+ render: function(param) {
6781
+ var field = param.field;
6782
+ var _formState_errors_phone;
6783
+ return /* @__PURE__ */ import_react33.default.createElement(PhoneInput, {
6784
+ label: "Phone number",
6785
+ helperText: (_formState_errors_phone = formState.errors.phone) === null || _formState_errors_phone === void 0 ? void 0 : _formState_errors_phone.message,
6786
+ preferredCountry: {
6787
+ label: "+966"
6788
+ },
6789
+ handleChange: field.onChange
6790
+ });
6791
+ }
6792
+ }));
6793
+ case "link":
6794
+ return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6795
+ control: control,
6796
+ name: "email",
6797
+ render: function(param) /* @__PURE__ */ {
6798
+ var field = param.field;
6799
+ var _props_texts, _formState_errors_email, _props_texts1;
6800
+ var _field_value;
6801
+ return import_react33.default.createElement(Input, {
6802
+ width: "full",
6803
+ type: "text",
6804
+ autoComplete: "email",
6805
+ label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.emailLabel) || "Email",
6806
+ helperText: (_formState_errors_email = formState.errors.email) === null || _formState_errors_email === void 0 ? void 0 : _formState_errors_email.message,
6807
+ placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.emailPlaceholder) || "contact@sikka.io",
6808
+ value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : "",
6809
+ onChange: field.onChange
6810
+ });
6811
+ }
6812
+ }));
6813
+ default:
6814
+ break;
6815
+ }
6816
+ };
6668
6817
  return /* @__PURE__ */ import_react33.default.createElement("div", {
6669
6818
  className: "hawa-flex hawa-flex-col hawa-gap-4"
6670
6819
  }, /* @__PURE__ */ import_react33.default.createElement(Card, {
@@ -6684,88 +6833,16 @@ var LoginForm = function(props) {
6684
6833
  console.log("Form is submitted but handleLogin prop is missing");
6685
6834
  }
6686
6835
  })
6687
- }, props.loginType === "email" ? /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6688
- control: control,
6689
- name: "email",
6690
- render: function(param) /* @__PURE__ */ {
6691
- var field = param.field;
6692
- var _props_texts, _formState_errors_email, _props_texts1;
6693
- var _field_value;
6694
- return import_react33.default.createElement(Input, {
6695
- width: "full",
6696
- type: "text",
6697
- autoComplete: "email",
6698
- label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.emailLabel) || "Email",
6699
- helperText: (_formState_errors_email = formState.errors.email) === null || _formState_errors_email === void 0 ? void 0 : _formState_errors_email.message,
6700
- placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.emailPlaceholder) || "contact@sikka.io",
6701
- value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : "",
6702
- onChange: field.onChange
6703
- });
6704
- }
6705
- }) : props.loginType === "username" ? /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6706
- control: control,
6707
- name: "username",
6708
- render: function(param) {
6709
- var field = param.field;
6710
- var _props_texts, _formState_errors_username, _props_texts1;
6711
- var _field_value;
6712
- return /* @__PURE__ */ import_react33.default.createElement(Input, {
6713
- width: "full",
6714
- type: "text",
6715
- autoComplete: "username",
6716
- label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.usernameLabel) || "Username",
6717
- helperText: (_formState_errors_username = formState.errors.username) === null || _formState_errors_username === void 0 ? void 0 : _formState_errors_username.message,
6718
- placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.usernamePlaceholder) || "sikka_sa",
6719
- onChange: field.onChange,
6720
- value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : ""
6721
- });
6722
- }
6723
- }) : /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6724
- control: control,
6725
- name: "phone",
6726
- render: function(param) {
6727
- var field = param.field;
6728
- var _formState_errors_phone;
6729
- return /* @__PURE__ */ import_react33.default.createElement(PhoneInput, {
6730
- label: "Phone number",
6731
- helperText: (_formState_errors_phone = formState.errors.phone) === null || _formState_errors_phone === void 0 ? void 0 : _formState_errors_phone.message,
6732
- preferredCountry: {
6733
- label: "+966"
6734
- },
6735
- handleChange: field.onChange
6736
- });
6737
- }
6738
- }), props.loginType !== "phone" && /* @__PURE__ */ import_react33.default.createElement("div", null, /* @__PURE__ */ import_react33.default.createElement(import_react_hook_form2.Controller, {
6739
- control: control,
6740
- name: "password",
6741
- render: function(param) /* @__PURE__ */ {
6742
- var field = param.field;
6743
- var _props_texts, _props_texts1, _formState_errors_password;
6744
- var _field_value;
6745
- return import_react33.default.createElement(Input, {
6746
- width: "full",
6747
- autoComplete: "current-password",
6748
- type: "password",
6749
- label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.passwordLabel) || "Password",
6750
- placeholder: ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.passwordPlaceholder) || "Enter your password",
6751
- helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message,
6752
- onChange: field.onChange,
6753
- value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : ""
6754
- });
6755
- }
6756
- }), !props.withoutResetPassword && /* @__PURE__ */ import_react33.default.createElement("div", {
6757
- onClick: props.handleForgotPassword,
6758
- className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-text-xs dark:hawa-text-gray-300"
6759
- }, ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.forgotPasswordText) || "Forgot Password?")), /* @__PURE__ */ import_react33.default.createElement(Button, {
6836
+ }, renderFields(), /* @__PURE__ */ import_react33.default.createElement(Button, {
6760
6837
  className: "hawa-mt-0 hawa-w-full",
6761
6838
  type: "submit",
6762
6839
  isLoading: props.isLoading
6763
- }, ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.loginText) || "Login"), !props.withoutRegister && /* @__PURE__ */ import_react33.default.createElement("div", {
6840
+ }, ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.loginText) || "Login"), props.additionalButtons, !props.withoutRegister && /* @__PURE__ */ import_react33.default.createElement("div", {
6764
6841
  className: "hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal hawa-select-none dark:hawa-text-gray-300"
6765
- }, ((_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.newUserText) || "New user?", " ", /* @__PURE__ */ import_react33.default.createElement("span", {
6842
+ }, ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.newUserText) || "New user?", " ", /* @__PURE__ */ import_react33.default.createElement("span", {
6766
6843
  onClick: props.handleRouteToRegister,
6767
6844
  className: "clickable-link"
6768
- }, ((_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.createAccount) || "Create Account")))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react33.default.createElement(CardFooter, {
6845
+ }, ((_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.createAccount) || "Create Account")))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react33.default.createElement(CardFooter, {
6769
6846
  className: cn(props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2")
6770
6847
  }, props.viaGoogle && /* @__PURE__ */ import_react33.default.createElement(Button, {
6771
6848
  className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
@@ -6775,7 +6852,7 @@ var LoginForm = function(props) {
6775
6852
  size: "button"
6776
6853
  }) : /* @__PURE__ */ import_react33.default.createElement(Logos.google, {
6777
6854
  className: "hawa-h-4 hawa-w-4"
6778
- }), !props.logosOnly && ((_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.loginViaGoogleLabel)), props.viaGithub && /* @__PURE__ */ import_react33.default.createElement(Button, {
6855
+ }), !props.logosOnly && ((_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.loginViaGoogleLabel)), props.viaGithub && /* @__PURE__ */ import_react33.default.createElement(Button, {
6779
6856
  className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
6780
6857
  variant: "outline",
6781
6858
  onClick: props.handleGithubLogin
@@ -6783,7 +6860,7 @@ var LoginForm = function(props) {
6783
6860
  size: "button"
6784
6861
  }) : /* @__PURE__ */ import_react33.default.createElement(Logos.github, {
6785
6862
  className: "hawa-h-4 hawa-w-4"
6786
- }), !props.logosOnly && ((_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.loginViaGithubLabel)), props.viaTwitter && /* @__PURE__ */ import_react33.default.createElement(Button, {
6863
+ }), !props.logosOnly && ((_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.loginViaGithubLabel)), props.viaTwitter && /* @__PURE__ */ import_react33.default.createElement(Button, {
6787
6864
  className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2",
6788
6865
  variant: "outline",
6789
6866
  onClick: props.handleTwitterLogin
@@ -6791,7 +6868,7 @@ var LoginForm = function(props) {
6791
6868
  size: "button"
6792
6869
  }) : /* @__PURE__ */ import_react33.default.createElement(Logos.twitter, {
6793
6870
  className: "hawa-h-4 hawa-w-4"
6794
- }), " ", !props.logosOnly && ((_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.loginViaTwitterLabel))) : null), props.handleColorMode && props.handleLanguage && /* @__PURE__ */ import_react33.default.createElement(InterfaceSettings, {
6871
+ }), " ", !props.logosOnly && ((_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.loginViaTwitterLabel))) : null), props.handleColorMode && props.handleLanguage && /* @__PURE__ */ import_react33.default.createElement(InterfaceSettings, {
6795
6872
  currentColorMode: props.currentColorMode,
6796
6873
  currentLanguage: props.currentLanguage,
6797
6874
  handleColorMode: props.handleColorMode,
package/dist/index.mjs CHANGED
@@ -319,12 +319,12 @@ var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__
319
319
  ));
320
320
  CardDescription.displayName = "CardDescription";
321
321
  var CardContent = React5.forwardRef(
322
- ({ headless, className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
322
+ ({ headless, noPadding, className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
323
323
  "div",
324
324
  {
325
325
  ref,
326
326
  className: cn(
327
- "hawa-p-6",
327
+ noPadding ? "hawa-p-0" : "hawa-p-6",
328
328
  headless ? "hawa-pt-6" : "hawa-pt-0",
329
329
  className
330
330
  ),
@@ -1880,19 +1880,29 @@ var DropdownMenu = ({
1880
1880
  };
1881
1881
 
1882
1882
  // components/elements/ColorPicker.tsx
1883
- import React25, { useState as useState9 } from "react";
1884
- var ColorPicker = (props) => {
1883
+ import React25, {
1884
+ useState as useState9
1885
+ } from "react";
1886
+ var ColorPicker = ({
1887
+ containerProps,
1888
+ colorPickerProps,
1889
+ textInputProps,
1890
+ ...props
1891
+ }) => {
1885
1892
  const [selectedColor, setSelectedColor] = useState9(props.color);
1886
1893
  return /* @__PURE__ */ React25.createElement(
1887
1894
  "div",
1888
1895
  {
1889
- className: `hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0`
1896
+ className: cn(
1897
+ `hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0`,
1898
+ containerProps?.className
1899
+ )
1890
1900
  },
1891
1901
  /* @__PURE__ */ React25.createElement(
1892
1902
  "div",
1893
1903
  {
1894
1904
  style: { backgroundColor: selectedColor },
1895
- className: "hawa-rounded-bl-lg hawa-rounded-tl-lg"
1905
+ className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border-r"
1896
1906
  },
1897
1907
  /* @__PURE__ */ React25.createElement(
1898
1908
  "input",
@@ -1905,7 +1915,8 @@ var ColorPicker = (props) => {
1905
1915
  props.handleChange(e);
1906
1916
  }
1907
1917
  },
1908
- className: "hawa-opacity-0"
1918
+ className: cn("hawa-opacity-0", props.colorPickerClassNames),
1919
+ ...colorPickerProps
1909
1920
  }
1910
1921
  )
1911
1922
  ),
@@ -1920,7 +1931,11 @@ var ColorPicker = (props) => {
1920
1931
  }
1921
1932
  },
1922
1933
  value: selectedColor,
1923
- className: "hawa-w-24 hawa-bg-background hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2"
1934
+ className: cn(
1935
+ "hawa-w-24 hawa-bg-background hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2",
1936
+ props.colorTextClassNames
1937
+ ),
1938
+ ...textInputProps
1924
1939
  }
1925
1940
  )
1926
1941
  );
@@ -5933,7 +5948,7 @@ var SidebarGroup = ({
5933
5948
  direction,
5934
5949
  isOpen
5935
5950
  }) => {
5936
- return /* @__PURE__ */ React49.createElement("div", null, title && /* @__PURE__ */ React49.createElement("h3", { className: "hawa-mb-1 hawa-font-bold" }, title), /* @__PURE__ */ React49.createElement("ul", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React49.createElement(
5951
+ return /* @__PURE__ */ React49.createElement("div", { className: "hawa-m-2" }, title && /* @__PURE__ */ React49.createElement("h3", { className: "hawa-mb-1 hawa-font-bold" }, title), /* @__PURE__ */ React49.createElement("ul", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React49.createElement(
5937
5952
  Accordion2,
5938
5953
  {
5939
5954
  value: openedItem,
@@ -5997,8 +6012,8 @@ var SidebarItem = ({
5997
6012
  "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
5998
6013
  )
5999
6014
  },
6000
- item.icon,
6001
- isOpen && /* @__PURE__ */ React49.createElement(
6015
+ item.icon && item.icon,
6016
+ /* @__PURE__ */ React49.createElement(
6002
6017
  "span",
6003
6018
  {
6004
6019
  className: cn(
@@ -6036,7 +6051,7 @@ var SidebarItem = ({
6036
6051
  getSelectedStyle(subitem.value)
6037
6052
  )
6038
6053
  },
6039
- subitem.icon,
6054
+ subitem.icon && subitem.icon,
6040
6055
  subitem.label
6041
6056
  ))
6042
6057
  ))
@@ -6060,23 +6075,16 @@ var SidebarItem = ({
6060
6075
  "hawa-overflow-x-clip "
6061
6076
  )
6062
6077
  },
6063
- /* @__PURE__ */ React49.createElement(
6064
- "div",
6078
+ /* @__PURE__ */ React49.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React49.createElement(
6079
+ "span",
6065
6080
  {
6066
- className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2"
6081
+ className: cn(
6082
+ "hawa-whitespace-nowrap hawa-transition-all",
6083
+ isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
6084
+ )
6067
6085
  },
6068
- item.icon,
6069
- /* @__PURE__ */ React49.createElement(
6070
- "span",
6071
- {
6072
- className: cn(
6073
- "hawa-whitespace-nowrap hawa-transition-all",
6074
- isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
6075
- )
6076
- },
6077
- item.label
6078
- )
6079
- )
6086
+ item.label
6087
+ ))
6080
6088
  );
6081
6089
  }
6082
6090
  };
@@ -6333,7 +6341,7 @@ var AppLayout = ({
6333
6341
  "div",
6334
6342
  {
6335
6343
  className: cn(
6336
- "hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-2 hawa-py-2 hawa-transition-all",
6344
+ "hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-0 hawa-py-2 hawa-transition-all",
6337
6345
  design === "floating" ? "hawa-top-[76px]" : "hawa-top-14",
6338
6346
  openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"
6339
6347
  ),
@@ -6459,9 +6467,9 @@ import React53 from "react";
6459
6467
  import { Controller as Controller2, useForm } from "react-hook-form";
6460
6468
  import { zodResolver } from "@hookform/resolvers/zod";
6461
6469
  import * as z from "zod";
6462
- var LoginForm = (props) => {
6470
+ var LoginForm = ({ loginType, ...props }) => {
6463
6471
  let formSchema;
6464
- if (props.loginType === "email") {
6472
+ if (loginType === "email") {
6465
6473
  formSchema = z.object({
6466
6474
  email: z.string({
6467
6475
  required_error: props.texts?.emailRequiredText
@@ -6470,25 +6478,171 @@ var LoginForm = (props) => {
6470
6478
  required_error: props.texts?.passwordRequiredText
6471
6479
  }).min(5, { message: "Password must be at least 5 characters long" }).nonempty({ message: props.texts?.passwordRequiredText })
6472
6480
  });
6473
- } else if (props.loginType === "username") {
6481
+ } else if (loginType === "username") {
6474
6482
  formSchema = z.object({
6475
6483
  username: z.string().min(2, { message: "Username must be at least 2 characters" }).nonempty({ message: props.texts?.usernameRequired }),
6476
6484
  password: z.string({
6477
6485
  required_error: props.texts?.passwordRequiredText
6478
6486
  }).min(5, { message: "Password must be at least 5 characters long" }).nonempty({ message: props.texts?.passwordRequiredText })
6479
6487
  });
6480
- } else if (props.loginType === "phone") {
6488
+ } else if (loginType === "phone") {
6481
6489
  formSchema = z.object({
6482
6490
  phone: z.string({ required_error: props.texts?.phoneRequiredText }).refine((value) => value.split("-")[1] !== "", {
6483
6491
  message: props.texts?.phoneRequiredText
6484
6492
  })
6485
6493
  });
6494
+ } else if (loginType === "link") {
6495
+ formSchema = z.object({
6496
+ email: z.string({
6497
+ required_error: props.texts?.emailRequiredText
6498
+ }).nonempty({ message: props.texts?.emailRequiredText }).email({ message: props.texts?.emailInvalidText })
6499
+ });
6486
6500
  } else {
6487
6501
  formSchema = z.object({});
6488
6502
  }
6489
6503
  const { handleSubmit, control, formState } = useForm({
6490
6504
  resolver: zodResolver(formSchema)
6491
6505
  });
6506
+ const renderFields = () => {
6507
+ switch (loginType) {
6508
+ case "email":
6509
+ return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
6510
+ Controller2,
6511
+ {
6512
+ control,
6513
+ name: "email",
6514
+ render: ({ field }) => /* @__PURE__ */ React53.createElement(
6515
+ Input,
6516
+ {
6517
+ width: "full",
6518
+ type: "text",
6519
+ autoComplete: "email",
6520
+ label: props.texts?.emailLabel || "Email",
6521
+ helperText: formState.errors.email?.message,
6522
+ placeholder: props.texts?.emailPlaceholder || "contact@sikka.io",
6523
+ value: field.value ?? "",
6524
+ onChange: field.onChange
6525
+ }
6526
+ )
6527
+ }
6528
+ ), /* @__PURE__ */ React53.createElement("div", null, /* @__PURE__ */ React53.createElement(
6529
+ Controller2,
6530
+ {
6531
+ control,
6532
+ name: "password",
6533
+ render: ({ field }) => /* @__PURE__ */ React53.createElement(
6534
+ Input,
6535
+ {
6536
+ width: "full",
6537
+ autoComplete: "current-password",
6538
+ type: "password",
6539
+ label: props.texts?.passwordLabel || "Password",
6540
+ placeholder: props.texts?.passwordPlaceholder || "Enter your password",
6541
+ helperText: formState.errors.password?.message,
6542
+ onChange: field.onChange,
6543
+ value: field.value ?? ""
6544
+ }
6545
+ )
6546
+ }
6547
+ ), !props.withoutResetPassword && /* @__PURE__ */ React53.createElement(
6548
+ "div",
6549
+ {
6550
+ onClick: props.handleForgotPassword,
6551
+ className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-text-xs dark:hawa-text-gray-300"
6552
+ },
6553
+ props.texts?.forgotPasswordText || "Forgot Password?"
6554
+ )));
6555
+ case "username":
6556
+ return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
6557
+ Controller2,
6558
+ {
6559
+ control,
6560
+ name: "username",
6561
+ render: ({ field }) => {
6562
+ return /* @__PURE__ */ React53.createElement(
6563
+ Input,
6564
+ {
6565
+ width: "full",
6566
+ type: "text",
6567
+ autoComplete: "username",
6568
+ label: props.texts?.usernameLabel || "Username",
6569
+ helperText: formState.errors.username?.message,
6570
+ placeholder: props.texts?.usernamePlaceholder || "sikka_sa",
6571
+ onChange: field.onChange,
6572
+ value: field.value ?? ""
6573
+ }
6574
+ );
6575
+ }
6576
+ }
6577
+ ), /* @__PURE__ */ React53.createElement("div", null, /* @__PURE__ */ React53.createElement(
6578
+ Controller2,
6579
+ {
6580
+ control,
6581
+ name: "password",
6582
+ render: ({ field }) => /* @__PURE__ */ React53.createElement(
6583
+ Input,
6584
+ {
6585
+ width: "full",
6586
+ autoComplete: "current-password",
6587
+ type: "password",
6588
+ label: props.texts?.passwordLabel || "Password",
6589
+ placeholder: props.texts?.passwordPlaceholder || "Enter your password",
6590
+ helperText: formState.errors.password?.message,
6591
+ onChange: field.onChange,
6592
+ value: field.value ?? ""
6593
+ }
6594
+ )
6595
+ }
6596
+ ), !props.withoutResetPassword && /* @__PURE__ */ React53.createElement(
6597
+ "div",
6598
+ {
6599
+ onClick: props.handleForgotPassword,
6600
+ className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-text-xs dark:hawa-text-gray-300"
6601
+ },
6602
+ props.texts?.forgotPasswordText || "Forgot Password?"
6603
+ )));
6604
+ case "phone":
6605
+ return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
6606
+ Controller2,
6607
+ {
6608
+ control,
6609
+ name: "phone",
6610
+ render: ({ field }) => /* @__PURE__ */ React53.createElement(
6611
+ PhoneInput,
6612
+ {
6613
+ label: "Phone number",
6614
+ helperText: formState.errors.phone?.message,
6615
+ preferredCountry: { label: "+966" },
6616
+ handleChange: field.onChange
6617
+ }
6618
+ )
6619
+ }
6620
+ ));
6621
+ case "link":
6622
+ return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
6623
+ Controller2,
6624
+ {
6625
+ control,
6626
+ name: "email",
6627
+ render: ({ field }) => /* @__PURE__ */ React53.createElement(
6628
+ Input,
6629
+ {
6630
+ width: "full",
6631
+ type: "text",
6632
+ autoComplete: "email",
6633
+ label: props.texts?.emailLabel || "Email",
6634
+ helperText: formState.errors.email?.message,
6635
+ placeholder: props.texts?.emailPlaceholder || "contact@sikka.io",
6636
+ value: field.value ?? "",
6637
+ onChange: field.onChange
6638
+ }
6639
+ )
6640
+ }
6641
+ ));
6642
+ default:
6643
+ break;
6644
+ }
6645
+ };
6492
6646
  return /* @__PURE__ */ React53.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React53.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React53.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React53.createElement(
6493
6647
  Alert,
6494
6648
  {
@@ -6510,89 +6664,7 @@ var LoginForm = (props) => {
6510
6664
  }
6511
6665
  })
6512
6666
  },
6513
- props.loginType === "email" ? /* @__PURE__ */ React53.createElement(
6514
- Controller2,
6515
- {
6516
- control,
6517
- name: "email",
6518
- render: ({ field }) => /* @__PURE__ */ React53.createElement(
6519
- Input,
6520
- {
6521
- width: "full",
6522
- type: "text",
6523
- autoComplete: "email",
6524
- label: props.texts?.emailLabel || "Email",
6525
- helperText: formState.errors.email?.message,
6526
- placeholder: props.texts?.emailPlaceholder || "contact@sikka.io",
6527
- value: field.value ?? "",
6528
- onChange: field.onChange
6529
- }
6530
- )
6531
- }
6532
- ) : props.loginType === "username" ? /* @__PURE__ */ React53.createElement(
6533
- Controller2,
6534
- {
6535
- control,
6536
- name: "username",
6537
- render: ({ field }) => {
6538
- return /* @__PURE__ */ React53.createElement(
6539
- Input,
6540
- {
6541
- width: "full",
6542
- type: "text",
6543
- autoComplete: "username",
6544
- label: props.texts?.usernameLabel || "Username",
6545
- helperText: formState.errors.username?.message,
6546
- placeholder: props.texts?.usernamePlaceholder || "sikka_sa",
6547
- onChange: field.onChange,
6548
- value: field.value ?? ""
6549
- }
6550
- );
6551
- }
6552
- }
6553
- ) : /* @__PURE__ */ React53.createElement(
6554
- Controller2,
6555
- {
6556
- control,
6557
- name: "phone",
6558
- render: ({ field }) => /* @__PURE__ */ React53.createElement(
6559
- PhoneInput,
6560
- {
6561
- label: "Phone number",
6562
- helperText: formState.errors.phone?.message,
6563
- preferredCountry: { label: "+966" },
6564
- handleChange: field.onChange
6565
- }
6566
- )
6567
- }
6568
- ),
6569
- props.loginType !== "phone" && /* @__PURE__ */ React53.createElement("div", null, /* @__PURE__ */ React53.createElement(
6570
- Controller2,
6571
- {
6572
- control,
6573
- name: "password",
6574
- render: ({ field }) => /* @__PURE__ */ React53.createElement(
6575
- Input,
6576
- {
6577
- width: "full",
6578
- autoComplete: "current-password",
6579
- type: "password",
6580
- label: props.texts?.passwordLabel || "Password",
6581
- placeholder: props.texts?.passwordPlaceholder || "Enter your password",
6582
- helperText: formState.errors.password?.message,
6583
- onChange: field.onChange,
6584
- value: field.value ?? ""
6585
- }
6586
- )
6587
- }
6588
- ), !props.withoutResetPassword && /* @__PURE__ */ React53.createElement(
6589
- "div",
6590
- {
6591
- onClick: props.handleForgotPassword,
6592
- className: "hawa-mb-3 hawa-mt-2 hawa-w-fit hawa-cursor-pointer hawa-text-xs dark:hawa-text-gray-300"
6593
- },
6594
- props.texts?.forgotPasswordText || "Forgot Password?"
6595
- )),
6667
+ renderFields(),
6596
6668
  /* @__PURE__ */ React53.createElement(
6597
6669
  Button,
6598
6670
  {
@@ -6602,6 +6674,7 @@ var LoginForm = (props) => {
6602
6674
  },
6603
6675
  props.texts?.loginText || "Login"
6604
6676
  ),
6677
+ props.additionalButtons,
6605
6678
  !props.withoutRegister && /* @__PURE__ */ React53.createElement("div", { className: "hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal hawa-select-none dark:hawa-text-gray-300" }, props.texts?.newUserText || "New user?", " ", /* @__PURE__ */ React53.createElement(
6606
6679
  "span",
6607
6680
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.8.1-next",
3
+ "version": "0.8.4-next",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {