@sikka/hawa 0.0.204 → 0.0.206

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 (46) hide show
  1. package/dist/styles.css +133 -14
  2. package/es/blocks/AuthForms/CodeConfirmation.d.ts +15 -8
  3. package/es/blocks/AuthForms/SignInForm.d.ts +2 -2
  4. package/es/blocks/AuthForms/SignUpForm.d.ts +1 -1
  5. package/es/elements/HawaButton.d.ts +4 -1
  6. package/es/elements/HawaChip.d.ts +3 -0
  7. package/es/elements/HawaPinInput.d.ts +4 -2
  8. package/es/elements/{HawaTimeline.d.ts → HawaStepper.d.ts} +1 -1
  9. package/es/elements/HawaTable.d.ts +7 -2
  10. package/es/elements/index.d.ts +1 -1
  11. package/es/index.es.js +1 -1
  12. package/lib/blocks/AuthForms/CodeConfirmation.d.ts +15 -8
  13. package/lib/blocks/AuthForms/SignInForm.d.ts +2 -2
  14. package/lib/blocks/AuthForms/SignUpForm.d.ts +1 -1
  15. package/lib/elements/HawaButton.d.ts +4 -1
  16. package/lib/elements/HawaChip.d.ts +3 -0
  17. package/lib/elements/HawaPinInput.d.ts +4 -2
  18. package/lib/elements/{HawaTimeline.d.ts → HawaStepper.d.ts} +1 -1
  19. package/lib/elements/HawaTable.d.ts +7 -2
  20. package/lib/elements/index.d.ts +1 -1
  21. package/lib/index.js +1 -1
  22. package/package.json +1 -1
  23. package/src/blocks/AuthForms/CodeConfirmation.tsx +57 -46
  24. package/src/blocks/AuthForms/NewPasswordForm.tsx +0 -1
  25. package/src/blocks/AuthForms/SignInForm.tsx +81 -76
  26. package/src/blocks/AuthForms/SignInPhone.tsx +2 -14
  27. package/src/blocks/AuthForms/SignUpForm.tsx +3 -7
  28. package/src/elements/Breadcrumb.tsx +5 -1
  29. package/src/elements/HawaButton.tsx +69 -44
  30. package/src/elements/HawaChip.tsx +31 -4
  31. package/src/elements/HawaDrawer.tsx +1 -4
  32. package/src/elements/HawaItemCard.tsx +0 -1
  33. package/src/elements/HawaMenu.tsx +1 -2
  34. package/src/elements/HawaModal.tsx +0 -2
  35. package/src/elements/HawaPhoneInput.tsx +1 -4
  36. package/src/elements/HawaPinInput.tsx +61 -38
  37. package/src/elements/HawaSelect.tsx +3 -7
  38. package/src/elements/HawaStepper.tsx +97 -0
  39. package/src/elements/HawaTable.tsx +224 -208
  40. package/src/elements/HawaTabs.tsx +0 -2
  41. package/src/elements/HawaTextField.tsx +7 -6
  42. package/src/elements/index.ts +1 -1
  43. package/src/hooks/useBreakpoint.ts +2 -3
  44. package/src/hooks/useTable.ts +6 -4
  45. package/src/styles.css +133 -14
  46. package/src/elements/HawaTimeline.tsx +0 -84
package/dist/styles.css CHANGED
@@ -572,6 +572,12 @@ video {
572
572
  .-left-1 {
573
573
  left: -0.25rem;
574
574
  }
575
+ .-right-3 {
576
+ right: -0.75rem;
577
+ }
578
+ .-top-3 {
579
+ top: -0.75rem;
580
+ }
575
581
  .bottom-0 {
576
582
  bottom: 0px;
577
583
  }
@@ -593,6 +599,9 @@ video {
593
599
  .left-2\.5 {
594
600
  left: 0.625rem;
595
601
  }
602
+ .left-3 {
603
+ left: 0.75rem;
604
+ }
596
605
  .right-0 {
597
606
  right: 0px;
598
607
  }
@@ -602,9 +611,6 @@ video {
602
611
  .right-2\.5 {
603
612
  right: 0.625rem;
604
613
  }
605
- .right-3 {
606
- right: 0.75rem;
607
- }
608
614
  .right-4 {
609
615
  right: 1rem;
610
616
  }
@@ -775,6 +781,9 @@ video {
775
781
  .mt-3 {
776
782
  margin-top: 0.75rem;
777
783
  }
784
+ .mt-4 {
785
+ margin-top: 1rem;
786
+ }
778
787
  .mt-5 {
779
788
  margin-top: 1.25rem;
780
789
  }
@@ -811,6 +820,9 @@ video {
811
820
  .h-0\.5 {
812
821
  height: 0.125rem;
813
822
  }
823
+ .h-1 {
824
+ height: 0.25rem;
825
+ }
814
826
  .h-10 {
815
827
  height: 2.5rem;
816
828
  }
@@ -829,6 +841,9 @@ video {
829
841
  .h-24 {
830
842
  height: 6rem;
831
843
  }
844
+ .h-3 {
845
+ height: 0.75rem;
846
+ }
832
847
  .h-32 {
833
848
  height: 8rem;
834
849
  }
@@ -916,12 +931,18 @@ video {
916
931
  .w-14 {
917
932
  width: 3.5rem;
918
933
  }
934
+ .w-2 {
935
+ width: 0.5rem;
936
+ }
919
937
  .w-2\/3 {
920
938
  width: 66.666667%;
921
939
  }
922
940
  .w-24 {
923
941
  width: 6rem;
924
942
  }
943
+ .w-3 {
944
+ width: 0.75rem;
945
+ }
925
946
  .w-4 {
926
947
  width: 1rem;
927
948
  }
@@ -949,6 +970,9 @@ video {
949
970
  .w-\[calc\(1\%\)\] {
950
971
  width: calc(1%);
951
972
  }
973
+ .w-auto {
974
+ width: auto;
975
+ }
952
976
  .w-fit {
953
977
  width: -moz-fit-content;
954
978
  width: fit-content;
@@ -956,6 +980,9 @@ video {
956
980
  .w-full {
957
981
  width: 100%;
958
982
  }
983
+ .min-w-\[24px\] {
984
+ min-width: 24px;
985
+ }
959
986
  .min-w-full {
960
987
  min-width: 100%;
961
988
  }
@@ -1055,6 +1082,9 @@ video {
1055
1082
  -moz-appearance: none;
1056
1083
  appearance: none;
1057
1084
  }
1085
+ .grid-cols-2 {
1086
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1087
+ }
1058
1088
  .grid-cols-4 {
1059
1089
  grid-template-columns: repeat(4, minmax(0, 1fr));
1060
1090
  }
@@ -1156,10 +1186,6 @@ video {
1156
1186
  --tw-divide-opacity: 1;
1157
1187
  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
1158
1188
  }
1159
- .divide-gray-900 > :not([hidden]) ~ :not([hidden]) {
1160
- --tw-divide-opacity: 1;
1161
- border-color: rgb(17 24 39 / var(--tw-divide-opacity));
1162
- }
1163
1189
  .self-center {
1164
1190
  align-self: center;
1165
1191
  }
@@ -1386,6 +1412,10 @@ video {
1386
1412
  .border-transparent {
1387
1413
  border-color: transparent;
1388
1414
  }
1415
+ .border-white {
1416
+ --tw-border-opacity: 1;
1417
+ border-color: rgb(255 255 255 / var(--tw-border-opacity));
1418
+ }
1389
1419
  .border-yellow-300 {
1390
1420
  --tw-border-opacity: 1;
1391
1421
  border-color: rgb(253 224 71 / var(--tw-border-opacity));
@@ -1397,13 +1427,13 @@ video {
1397
1427
  --tw-border-opacity: 1;
1398
1428
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
1399
1429
  }
1400
- .bg-blue-100 {
1430
+ .bg-\[\#c92424\] {
1401
1431
  --tw-bg-opacity: 1;
1402
- background-color: rgb(219 234 254 / var(--tw-bg-opacity));
1432
+ background-color: rgb(201 36 36 / var(--tw-bg-opacity));
1403
1433
  }
1404
- .bg-blue-200 {
1434
+ .bg-blue-100 {
1405
1435
  --tw-bg-opacity: 1;
1406
- background-color: rgb(191 219 254 / var(--tw-bg-opacity));
1436
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity));
1407
1437
  }
1408
1438
  .bg-blue-50 {
1409
1439
  --tw-bg-opacity: 1;
@@ -1455,6 +1485,10 @@ video {
1455
1485
  --tw-bg-opacity: 1;
1456
1486
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
1457
1487
  }
1488
+ .bg-green-500 {
1489
+ --tw-bg-opacity: 1;
1490
+ background-color: rgb(34 197 94 / var(--tw-bg-opacity));
1491
+ }
1458
1492
  .bg-layoutPrimary-300 {
1459
1493
  background-color: var(--layout-primary-300);
1460
1494
  }
@@ -1612,15 +1646,15 @@ video {
1612
1646
  .pb-4 {
1613
1647
  padding-bottom: 1rem;
1614
1648
  }
1649
+ .pl-10 {
1650
+ padding-left: 2.5rem;
1651
+ }
1615
1652
  .pl-2 {
1616
1653
  padding-left: 0.5rem;
1617
1654
  }
1618
1655
  .pl-3 {
1619
1656
  padding-left: 0.75rem;
1620
1657
  }
1621
- .pr-10 {
1622
- padding-right: 2.5rem;
1623
- }
1624
1658
  .pr-2 {
1625
1659
  padding-right: 0.5rem;
1626
1660
  }
@@ -1673,6 +1707,9 @@ video {
1673
1707
  .text-\[11px\] {
1674
1708
  font-size: 11px;
1675
1709
  }
1710
+ .text-\[9px\] {
1711
+ font-size: 9px;
1712
+ }
1676
1713
  .text-lg {
1677
1714
  font-size: 1.125rem;
1678
1715
  line-height: 1.75rem;
@@ -1738,6 +1775,9 @@ video {
1738
1775
  --tw-text-opacity: 1;
1739
1776
  color: rgb(30 64 175 / var(--tw-text-opacity));
1740
1777
  }
1778
+ .text-buttonPrimary-500 {
1779
+ color: var(--button-primary-500);
1780
+ }
1741
1781
  .text-gray-300 {
1742
1782
  --tw-text-opacity: 1;
1743
1783
  color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -1794,6 +1834,9 @@ video {
1794
1834
  --tw-text-opacity: 1;
1795
1835
  color: rgb(161 98 7 / var(--tw-text-opacity));
1796
1836
  }
1837
+ .underline-offset-4 {
1838
+ text-underline-offset: 4px;
1839
+ }
1797
1840
  .opacity-0 {
1798
1841
  opacity: 0;
1799
1842
  }
@@ -1905,11 +1948,38 @@ body {
1905
1948
  top: 2px;
1906
1949
  }
1907
1950
 
1951
+ .after\:mx-2::after {
1952
+ content: var(--tw-content);
1953
+ margin-left: 0.5rem;
1954
+ margin-right: 0.5rem;
1955
+ }
1956
+
1957
+ .after\:mx-6::after {
1958
+ content: var(--tw-content);
1959
+ margin-left: 1.5rem;
1960
+ margin-right: 1.5rem;
1961
+ }
1962
+
1963
+ .after\:hidden::after {
1964
+ content: var(--tw-content);
1965
+ display: none;
1966
+ }
1967
+
1968
+ .after\:h-1::after {
1969
+ content: var(--tw-content);
1970
+ height: 0.25rem;
1971
+ }
1972
+
1908
1973
  .after\:h-5::after {
1909
1974
  content: var(--tw-content);
1910
1975
  height: 1.25rem;
1911
1976
  }
1912
1977
 
1978
+ .after\:w-10::after {
1979
+ content: var(--tw-content);
1980
+ width: 2.5rem;
1981
+ }
1982
+
1913
1983
  .after\:w-5::after {
1914
1984
  content: var(--tw-content);
1915
1985
  width: 1.25rem;
@@ -1925,6 +1995,17 @@ body {
1925
1995
  border-width: 1px;
1926
1996
  }
1927
1997
 
1998
+ .after\:border-b::after {
1999
+ content: var(--tw-content);
2000
+ border-bottom-width: 1px;
2001
+ }
2002
+
2003
+ .after\:border-gray-200::after {
2004
+ content: var(--tw-content);
2005
+ --tw-border-opacity: 1;
2006
+ border-color: rgb(229 231 235 / var(--tw-border-opacity));
2007
+ }
2008
+
1928
2009
  .after\:border-gray-300::after {
1929
2010
  content: var(--tw-content);
1930
2011
  --tw-border-opacity: 1;
@@ -2017,6 +2098,10 @@ body {
2017
2098
  color: rgb(37 99 235 / var(--tw-text-opacity));
2018
2099
  }
2019
2100
 
2101
+ .hover\:text-buttonPrimary-500:hover {
2102
+ color: var(--button-primary-500);
2103
+ }
2104
+
2020
2105
  .hover\:text-gray-400:hover {
2021
2106
  --tw-text-opacity: 1;
2022
2107
  color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2174,6 +2259,11 @@ body {
2174
2259
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
2175
2260
  }
2176
2261
 
2262
+ .dark .dark\:border-gray-900 {
2263
+ --tw-border-opacity: 1;
2264
+ border-color: rgb(17 24 39 / var(--tw-border-opacity));
2265
+ }
2266
+
2177
2267
  .dark .dark\:bg-blue-200 {
2178
2268
  --tw-bg-opacity: 1;
2179
2269
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -2298,6 +2388,12 @@ body {
2298
2388
  --tw-ring-offset-color: #1f2937;
2299
2389
  }
2300
2390
 
2391
+ .dark .dark\:after\:border-gray-700::after {
2392
+ content: var(--tw-content);
2393
+ --tw-border-opacity: 1;
2394
+ border-color: rgb(55 65 81 / var(--tw-border-opacity));
2395
+ }
2396
+
2301
2397
  .dark .dark\:hover\:bg-buttonPrimary-700:hover {
2302
2398
  background-color: var(--button-primary-700);
2303
2399
  }
@@ -2392,6 +2488,16 @@ body {
2392
2488
  .sm\:p-8 {
2393
2489
  padding: 2rem;
2394
2490
  }
2491
+
2492
+ .sm\:after\:inline-block::after {
2493
+ content: var(--tw-content);
2494
+ display: inline-block;
2495
+ }
2496
+
2497
+ .sm\:after\:content-\[\'\'\]::after {
2498
+ --tw-content: '';
2499
+ content: var(--tw-content);
2500
+ }
2395
2501
  }
2396
2502
 
2397
2503
  @media (min-width: 768px) {
@@ -2404,6 +2510,10 @@ body {
2404
2510
  width: 12rem;
2405
2511
  }
2406
2512
 
2513
+ .md\:w-full {
2514
+ width: 100%;
2515
+ }
2516
+
2407
2517
  .md\:max-w-md {
2408
2518
  max-width: 28rem;
2409
2519
  }
@@ -2429,3 +2539,12 @@ body {
2429
2539
  border-bottom-left-radius: 0.5rem;
2430
2540
  }
2431
2541
  }
2542
+
2543
+ @media (min-width: 1280px) {
2544
+
2545
+ .xl\:after\:mx-10::after {
2546
+ content: var(--tw-content);
2547
+ margin-left: 2.5rem;
2548
+ margin-right: 2.5rem;
2549
+ }
2550
+ }
@@ -1,15 +1,22 @@
1
1
  import React from "react";
2
- type CodeConfirmationTypes = {
3
- showError: any;
4
- errorTitle: any;
5
- errorText: any;
6
- texts: {
2
+ type TConfirmation = {
3
+ showError?: any;
4
+ errorTitle?: any;
5
+ errorText?: any;
6
+ texts?: {
7
+ checkYourPhone: string;
8
+ weSentCode: string;
9
+ didntGetCode: string;
10
+ resendCode: string;
7
11
  codeLabel: string;
8
12
  codePlaceholder: string;
9
13
  codeRequiredText: string;
10
- confirmText: string;
14
+ confirm: string;
15
+ cancel: any;
11
16
  };
12
- handleSignIn: any;
17
+ phoneNumber?: string;
18
+ submitConfirmation?: any;
19
+ handleSignIn?: any;
13
20
  };
14
- export declare const CodeConfirmation: React.FunctionComponent<CodeConfirmationTypes>;
21
+ export declare const CodeConfirmation: React.FunctionComponent<TConfirmation>;
15
22
  export {};
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
+ export declare const SignInForm: React.FunctionComponent<SignInFormTypes>;
2
3
  type SignInFormTypes = {
3
- language?: string;
4
+ direction?: "rtl" | "ltr";
4
5
  showError?: any;
5
6
  errorTitle?: string;
6
7
  errorText?: string;
@@ -47,5 +48,4 @@ type SignInFormTypes = {
47
48
  handleGithubSignIn?: () => void;
48
49
  handleTwitterSignIn?: () => void;
49
50
  };
50
- export declare const SignInForm: React.FunctionComponent<SignInFormTypes>;
51
51
  export {};
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  type SignUpFormTypes = {
3
- language?: string;
3
+ direction?: "rtl" | "ltr";
4
4
  texts: {
5
5
  fullNameLabel: string;
6
6
  fullNamePlaceholder: string;
@@ -10,7 +10,10 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
10
10
  tooltip?: string;
11
11
  tooltipSize?: "normal" | "small" | "large";
12
12
  tooltipPosition?: "left-top" | "left-bottom" | "right-top" | "right-bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
13
+ startIcon?: any;
14
+ endIcon?: any;
13
15
  isLoading?: boolean;
16
+ badge?: any;
14
17
  }
15
- export declare function HawaButton({ className, variant, color, size, width, disabled, isLoading, tooltip, tooltipSize, tooltipPosition, tooltipDirection, margins, children, buttonID, ...props }: ButtonProps): JSX.Element;
18
+ export declare const HawaButton: React.FunctionComponent<ButtonProps>;
16
19
  export {};
@@ -3,6 +3,9 @@ type TChipTypes = {
3
3
  label: string;
4
4
  size?: "small" | "normal" | "large";
5
5
  icon?: JSX.Element;
6
+ color?: string;
7
+ dot?: boolean;
8
+ dotType?: "available" | "unavailable";
6
9
  };
7
10
  export declare const HawaChip: React.FunctionComponent<TChipTypes>;
8
11
  export {};
@@ -1,8 +1,10 @@
1
1
  import React from "react";
2
2
  type PinInputTypes = {
3
- label: string;
3
+ label?: string;
4
4
  icon?: JSX.Element;
5
- digits?: number;
5
+ digits: number;
6
+ width?: "normal" | "full";
7
+ getPins?: any;
6
8
  };
7
9
  export declare const HawaPinInput: React.FunctionComponent<PinInputTypes>;
8
10
  export {};
@@ -4,5 +4,5 @@ type THawaTimeline = {
4
4
  currentStep: any;
5
5
  orientation: "vertical" | "horizontal";
6
6
  };
7
- export declare const HawaTimeline: React.FunctionComponent<THawaTimeline>;
7
+ export declare const HawaStepper: React.FunctionComponent<THawaTimeline>;
8
8
  export {};
@@ -4,16 +4,21 @@ type TableTypes = {
4
4
  actions?: ActionItems[][];
5
5
  direction?: "rtl" | "ltr";
6
6
  rows?: any[any];
7
- noDataText?: any;
8
7
  handleActionClick?: any;
9
8
  end?: any;
10
9
  size?: "normal" | "small";
11
10
  highlightFirst?: boolean;
12
11
  customColor?: string;
13
12
  clickable?: boolean;
14
- actionsText?: string;
13
+ texts?: {
14
+ actions?: string;
15
+ noData?: any;
16
+ items?: string;
17
+ page?: string;
18
+ };
15
19
  bordersWidth?: string;
16
20
  onActionClicked?: any;
21
+ headerTools?: boolean;
17
22
  borders?: "all" | "cols" | "rows" | "outer" | "inner";
18
23
  };
19
24
  type ActionItems = {
@@ -20,7 +20,7 @@ export * from "./HawaTabs";
20
20
  export * from "./HawaModal";
21
21
  export * from "./HawaMenu";
22
22
  export * from "./HawaCopyrights";
23
- export * from "./HawaTimeline";
23
+ export * from "./HawaStepper";
24
24
  export * from "./Breadcrumb";
25
25
  export * from "./HawaStats";
26
26
  export * from "./HawaSpinner";