@sikka/hawa 0.0.70 → 0.0.71

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 (31) hide show
  1. package/es/index.es.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/blocks/Payment/Form/CForm.js +1 -1
  5. package/src/blocks/Pricing/ComparingPlans.js +19 -19
  6. package/src/elements/DragDropImages.js +3 -3
  7. package/src/elements/DraggableCard.js +2 -2
  8. package/src/elements/HawaAccordian.js +1 -1
  9. package/src/elements/HawaAlert.js +2 -2
  10. package/src/elements/HawaChip.js +1 -1
  11. package/src/elements/HawaDrawerItem.js +2 -2
  12. package/src/elements/HawaItemCard.js +11 -11
  13. package/src/elements/HawaModal.js +14 -14
  14. package/src/elements/HawaPanelTabs.js +5 -5
  15. package/src/elements/HawaPopMenu.js +5 -5
  16. package/src/elements/HawaPricingCard.js +14 -14
  17. package/src/elements/HawaRadio.js +5 -5
  18. package/src/elements/HawaRange.js +2 -2
  19. package/src/elements/HawaSelect.js +1 -1
  20. package/src/elements/HawaSnackbar.js +5 -5
  21. package/src/elements/HawaSwitch.js +4 -4
  22. package/src/elements/HawaTable.js +8 -8
  23. package/src/elements/HawaTextField.js +2 -2
  24. package/src/elements/HawaTooltip.js +2 -2
  25. package/src/layout/HawaLayout.js +24 -24
  26. package/src/styles.css +7 -7
  27. package/src/tailwind.css +7 -7
  28. package/storybook-static/iframe.html +1 -1
  29. package/storybook-static/main.6c217d9d.iframe.bundle.js +1 -0
  30. package/storybook-static/project.json +1 -1
  31. package/storybook-static/main.d173b451.iframe.bundle.js +0 -1
package/src/elements/HawaTable.js CHANGED
@@ -7,17 +7,17 @@ export const HawaTable = (props) => {
7
7
  return (
8
8
  <>
9
9
  <div>
10
- <div class="overflow-x-auto relative rounded-xl">
11
- <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
12
- <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
10
+ <div className="overflow-x-auto relative rounded-xl">
11
+ <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
12
+ <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
13
13
  <tr>
14
14
  {props.columns.map((col, i) => (
15
- <th key={i} scope="col" class="py-3 px-6">
15
+ <th key={i} scope="col" className="py-3 px-6">
16
16
  {col}
17
17
  </th>
18
18
  ))}
19
19
  {props.actions && (
20
- <th scope="col" class="py-3 px-6">
20
+ <th scope="col" className="py-3 px-6">
21
21
  actions
22
22
  </th>
23
23
  )}
@@ -27,7 +27,7 @@ export const HawaTable = (props) => {
27
27
  {props.rows ? (
28
28
  props.rows.map((singleRow, j) => (
29
29
  <tr
30
- class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
30
+ className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
31
31
  key={j}
32
32
  >
33
33
  {singleRow.map((r, i) => {
@@ -35,13 +35,13 @@ export const HawaTable = (props) => {
35
35
  return (
36
36
  <th
37
37
  scope="row"
38
- class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
38
+ className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
39
39
  >
40
40
  {r}{" "}
41
41
  </th>
42
42
  );
43
43
  } else {
44
- return <td class="py-4 px-6">{r}</td>;
44
+ return <td className="py-4 px-6">{r}</td>;
45
45
  }
46
46
  })}
47
47
  {props.actions && (
package/src/elements/HawaTextField.js CHANGED
@@ -13,7 +13,7 @@ export const HawaTextField = (props) => {
13
13
  <textarea
14
14
  id="message"
15
15
  rows="4"
16
- class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
16
+ className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
17
17
  placeholder="Your message..."
18
18
  ></textarea>
19
19
  ) : (
@@ -25,7 +25,7 @@ export const HawaTextField = (props) => {
25
25
 
26
26
  {props.helperText && (
27
27
  <p className="mt-2 text-sm text-red-600 dark:text-red-500">
28
- {/* <span class="font-medium">Oh, snapp!</span> */}
28
+ {/* <span className="font-medium">Oh, snapp!</span> */}
29
29
  {props.helperText}
30
30
  </p>
31
31
  )}
package/src/elements/HawaTooltip.js CHANGED
@@ -6,10 +6,10 @@ export const HawaTooltip = (props) => {
6
6
  <div
7
7
  id={props.tooltipID}
8
8
  role="tooltip"
9
- class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
9
+ className="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
10
10
  >
11
11
  {props.content}
12
- <div class="tooltip-arrow" data-popper-arrow></div>
12
+ <div className="tooltip-arrow" data-popper-arrow></div>
13
13
  </div>
14
14
  );
15
15
  };
package/src/layout/HawaLayout.js CHANGED
@@ -10,12 +10,12 @@ const MenuButton = () => {
10
10
  data-drawer-show="drawer-navigation"
11
11
  aria-controls="drawer-navigation"
12
12
  type="button"
13
- class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
13
+ className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
14
14
  >
15
- <span class="sr-only">Open main menu</span>
15
+ <span className="sr-only">Open main menu</span>
16
16
  <svg
17
17
  aria-hidden="true"
18
- class="w-6 h-6"
18
+ className="w-6 h-6"
19
19
  fill="currentColor"
20
20
  viewBox="0 0 20 20"
21
21
  xmlns="http://www.w3.org/2000/svg"
@@ -33,28 +33,28 @@ const ProfileDropdown = (props) => {
33
33
  return (
34
34
  <div
35
35
  id="userDropdown"
36
- class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
36
+ className="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
37
37
  data-popper-reference-hidden=""
38
38
  data-popper-escaped=""
39
39
  data-popper-placement="bottom-start"
40
40
  // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
41
41
  >
42
- <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
42
+ <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
43
43
  <div>{props.username}</div>
44
- <div class="font-medium truncate">{props.userEmail}</div>
44
+ <div className="font-medium truncate">{props.userEmail}</div>
45
45
  </div>
46
46
  <ul
47
- class="py-1 text-sm text-gray-700 dark:text-gray-200"
47
+ className="py-1 text-sm text-gray-700 dark:text-gray-200"
48
48
  aria-labelledby="avatarButton"
49
49
  >
50
50
  {props.profileItems.map((it) => {
51
51
  return <ProfileItem text={it.text} link={it.slug} />;
52
52
  })}
53
53
  </ul>
54
- <div class="py-1">
54
+ <div className="py-1">
55
55
  <a
56
56
  href="#"
57
- class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
57
+ className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
58
58
  >
59
59
  Sign out
60
60
  </a>
@@ -66,23 +66,23 @@ const DrawerContent = (props) => {
66
66
  return (
67
67
  <div
68
68
  id="drawer-navigation"
69
- class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
69
+ className="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
70
70
  tabindex="-1"
71
71
  aria-labelledby="drawer-navigation-label"
72
72
  >
73
- <div href={props.logoHref} class="flex items-center">
73
+ <div href={props.logoHref} className="flex items-center">
74
74
  <img
75
75
  src={
76
76
  "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
77
77
  }
78
78
  // src={props.logoLink}
79
- class="h-9"
79
+ className="h-9"
80
80
  alt="Flowbite Logo"
81
81
  />
82
82
  </div>
83
83
  <CloseButton />
84
- <div class="py-4 overflow-y-auto">
85
- <ul class="space-y-2">
84
+ <div className="py-4 overflow-y-auto">
85
+ <ul className="space-y-2">
86
86
  {props.drawerItems.map((item, i) => {
87
87
  return (
88
88
  <HawaDrawerItem action={item.action} key={i} text={item.text} />
@@ -116,7 +116,7 @@ const CloseButton = () => {
116
116
  >
117
117
  <svg
118
118
  aria-hidden="true"
119
- class="w-5 h-5"
119
+ className="w-5 h-5"
120
120
  fill="currentColor"
121
121
  viewBox="0 0 20 20"
122
122
  xmlns="http://www.w3.org/2000/svg"
@@ -134,18 +134,18 @@ export const HawaLayout = (props) => {
134
134
  return (
135
135
  <div className="font-plex">
136
136
  <div>
137
- <nav class="border-gray-200 rounded dark:bg-gray-900">
138
- <div class="flex p-3 flex-row-reverse items-center justify-between w-full">
139
- {/* <div href={props.logoHref} class="flex items-center">
140
- <img src={props.logoLink} class="h-9" alt="Flowbite Logo" />
137
+ <nav className="border-gray-200 rounded dark:bg-gray-900">
138
+ <div className="flex p-3 flex-row-reverse items-center justify-between w-full">
139
+ {/* <div href={props.logoHref} className="flex items-center">
140
+ <img src={props.logoLink} className="h-9" alt="Flowbite Logo" />
141
141
  </div> */}
142
142
  <div
143
143
  data-dropdown-toggle="userDropdown"
144
144
  data-dropdown-placement="bottom-start"
145
- class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
145
+ className="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
146
146
  >
147
147
  <svg
148
- class="absolute -left-1 w-12 h-12 text-gray-400"
148
+ className="absolute -left-1 w-12 h-12 text-gray-400"
149
149
  fill="currentColor"
150
150
  viewBox="0 0 20 20"
151
151
  xmlns="http://www.w3.org/2000/svg"
@@ -158,14 +158,14 @@ export const HawaLayout = (props) => {
158
158
  </svg>
159
159
  </div>
160
160
 
161
- {/* <div href={props.logoHref} class="flex items-center">
161
+ {/* <div href={props.logoHref} className="flex items-center">
162
162
  <img
163
163
  src={
164
164
  // "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
165
165
  "https://qawaim-images.s3-ap-southeast-1.amazonaws.com/614580f79706137eab618399"
166
166
  }
167
167
  // src={props.logoLink}
168
- class="h-12"
168
+ className="h-12"
169
169
  alt="Flowbite Logo"
170
170
  />
171
171
  </div> */}
@@ -177,7 +177,7 @@ export const HawaLayout = (props) => {
177
177
  type="button"
178
178
  data-dropdown-toggle="userDropdown"
179
179
  data-dropdown-placement="bottom-start"
180
- class="w-10 h-10 rounded-full cursor-pointer"
180
+ className="w-10 h-10 rounded-full cursor-pointer"
181
181
  src="/docs/images/people/profile-picture-5.jpg"
182
182
  alt="User dropdown"
183
183
  /> */}
package/src/styles.css CHANGED
@@ -1928,14 +1928,14 @@ input:checked + .toggle-bg {
1928
1928
  body {
1929
1929
  font-family: "IBM Plex Sans Arabic";
1930
1930
  }
1931
- /* <div class="react-select-container">
1932
- <div class="react-select__control">
1933
- <div class="react-select__value-container">...</div>
1934
- <div class="react-select__indicators">...</div>
1931
+ /* <div className="react-select-container">
1932
+ <div className="react-select__control">
1933
+ <div className="react-select__value-container">...</div>
1934
+ <div className="react-select__indicators">...</div>
1935
1935
  </div>
1936
- <div class="react-select__menu">
1937
- <div class="react-select__menu-list">
1938
- <div class="react-select__option">...</div>
1936
+ <div className="react-select__menu">
1937
+ <div className="react-select__menu-list">
1938
+ <div className="react-select__option">...</div>
1939
1939
  </div>
1940
1940
  </div>
1941
1941
  </div> */
package/src/tailwind.css CHANGED
@@ -5,14 +5,14 @@
5
5
  body {
6
6
  font-family: "IBM Plex Sans Arabic";
7
7
  }
8
- /* <div class="react-select-container">
9
- <div class="react-select__control">
10
- <div class="react-select__value-container">...</div>
11
- <div class="react-select__indicators">...</div>
8
+ /* <div className="react-select-container">
9
+ <div className="react-select__control">
10
+ <div className="react-select__value-container">...</div>
11
+ <div className="react-select__indicators">...</div>
12
12
  </div>
13
- <div class="react-select__menu">
14
- <div class="react-select__menu-list">
15
- <div class="react-select__option">...</div>
13
+ <div className="react-select__menu">
14
+ <div className="react-select__menu-list">
15
+ <div className="react-select__option">...</div>
16
16
  </div>
17
17
  </div>
18
18
  </div> */
package/storybook-static/iframe.html CHANGED
@@ -361,4 +361,4 @@
361
361
 
362
362
 
363
363
 
364
- window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.67ec6e92.iframe.bundle.js"></script><script src="vendors~main.d5e21618.iframe.bundle.js"></script><script src="main.d173b451.iframe.bundle.js"></script></body></html>
364
+ window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.67ec6e92.iframe.bundle.js"></script><script src="vendors~main.d5e21618.iframe.bundle.js"></script><script src="main.6c217d9d.iframe.bundle.js"></script></body></html>