@sikka/hawa 0.0.270 → 0.0.271
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.
- package/dist/styles.css +42 -9
- package/es/elements/HawaSnackbar.d.ts +1 -0
- package/es/elements/HawaStats.d.ts +2 -1
- package/es/index.es.js +3 -3
- package/lib/elements/HawaSnackbar.d.ts +1 -0
- package/lib/elements/HawaStats.d.ts +2 -1
- package/lib/index.js +3 -3
- package/package.json +1 -1
- package/src/blocks/Misc/EmptyState.tsx +0 -1
- package/src/blocks/Misc/NoPermission.tsx +0 -1
- package/src/blocks/Pricing/ComparingPlans.tsx +0 -3
- package/src/blocks/Referral/ReferralAccount.tsx +0 -2
- package/src/blocks/Referral/ReferralSettlement.tsx +0 -1
- package/src/elements/ArrowCarousel.tsx +0 -1
- package/src/elements/BackToTop.tsx +0 -1
- package/src/elements/DragDropImages.tsx +0 -2
- package/src/elements/DraggableCard.tsx +0 -1
- package/src/elements/HawaAccordion.tsx +0 -1
- package/src/elements/HawaAlert.tsx +0 -1
- package/src/elements/HawaButton.tsx +1 -1
- package/src/elements/HawaCodeBlock.tsx +0 -2
- package/src/elements/HawaDropdownMenu.tsx +112 -58
- package/src/elements/HawaItemCard.tsx +0 -1
- package/src/elements/HawaLogoButton.tsx +0 -3
- package/src/elements/HawaModal.tsx +0 -1
- package/src/elements/HawaPricingCard.tsx +0 -1
- package/src/elements/HawaRadio.tsx +0 -1
- package/src/elements/HawaSnackbar.tsx +6 -3
- package/src/elements/HawaStats.tsx +16 -6
- package/src/elements/HawaStepper.tsx +0 -1
- package/src/elements/HawaTable.tsx +0 -6
- package/src/elements/InvoiceAccordion.tsx +0 -2
- package/src/elements/UsageCard.tsx +0 -1
- package/src/elements/UserFeedback.tsx +0 -1
- package/src/layout/Banner.tsx +0 -1
- package/src/layout/HawaAppLayout.tsx +0 -3
- package/src/layout/HawaAppLayoutSimplified.tsx +0 -4
- package/src/layout/HawaSiteLayout.tsx +0 -1
- package/src/styles.css +42 -9
- package/src/tailwind.css +7 -0
- package/tailwind.config.js +9 -1
package/package.json
CHANGED
|
@@ -27,7 +27,6 @@ export const EmptyState: FC<TEmptyState> = ({
|
|
|
27
27
|
viewBox="0 0 512 512"
|
|
28
28
|
height="0.35em"
|
|
29
29
|
width="0.35em"
|
|
30
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
31
30
|
>
|
|
32
31
|
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
33
32
|
</svg>{" "}
|
|
@@ -24,7 +24,6 @@ export const NoPermission: FC<TNoPermission> = ({
|
|
|
24
24
|
viewBox="0 0 448 512"
|
|
25
25
|
height="0.35em"
|
|
26
26
|
width="0.35em"
|
|
27
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
28
27
|
>
|
|
29
28
|
<path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
|
|
30
29
|
</svg> </div>
|
|
@@ -7,7 +7,6 @@ const CheckMark = () => (
|
|
|
7
7
|
aria-hidden="true"
|
|
8
8
|
fill="currentColor"
|
|
9
9
|
viewBox="0 0 20 20"
|
|
10
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
11
10
|
>
|
|
12
11
|
<path
|
|
13
12
|
fillRule="evenodd"
|
|
@@ -23,7 +22,6 @@ const UncheckMark = () => (
|
|
|
23
22
|
aria-hidden="true"
|
|
24
23
|
fill="currentColor"
|
|
25
24
|
viewBox="0 0 20 20"
|
|
26
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
27
25
|
>
|
|
28
26
|
<path
|
|
29
27
|
fillRule="evenodd"
|
|
@@ -137,7 +135,6 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
|
|
|
137
135
|
viewBox="0 0 16 16"
|
|
138
136
|
height="1em"
|
|
139
137
|
width="1em"
|
|
140
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
141
138
|
>
|
|
142
139
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
|
|
143
140
|
</svg>
|
|
@@ -30,7 +30,6 @@ export const ReferralAccount: FC<ReferralAccount> = ({
|
|
|
30
30
|
viewBox="0 0 512 512"
|
|
31
31
|
height="1em"
|
|
32
32
|
width="1em"
|
|
33
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
34
33
|
>
|
|
35
34
|
<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
|
|
36
35
|
</svg>{" "}
|
|
@@ -54,7 +53,6 @@ export const ReferralAccount: FC<ReferralAccount> = ({
|
|
|
54
53
|
viewBox="0 0 512 512"
|
|
55
54
|
height="1em"
|
|
56
55
|
width="1em"
|
|
57
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
58
56
|
>
|
|
59
57
|
<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
|
|
60
58
|
</svg>{" "}
|
|
@@ -159,7 +159,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
|
|
|
159
159
|
className="h-5 w-5"
|
|
160
160
|
fill="currentColor"
|
|
161
161
|
viewBox="0 0 20 20"
|
|
162
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
163
162
|
>
|
|
164
163
|
<path
|
|
165
164
|
fillRule="evenodd"
|
|
@@ -214,7 +213,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
|
|
|
214
213
|
stroke-linejoin="round"
|
|
215
214
|
height="1.5em"
|
|
216
215
|
width="1.5em"
|
|
217
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
218
216
|
>
|
|
219
217
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
220
218
|
<path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
|
|
@@ -16,7 +16,6 @@ export const DraggableCard: FC<DraggableCardTypes> = (props) => {
|
|
|
16
16
|
aria-hidden="true"
|
|
17
17
|
fill="currentColor"
|
|
18
18
|
viewBox="0 0 20 20"
|
|
19
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
20
19
|
>
|
|
21
20
|
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
|
|
22
21
|
</svg>
|
|
@@ -210,7 +210,7 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
210
210
|
{isClicked && feedback ? (
|
|
211
211
|
<div className="w-full text-center">{buttonText}</div>
|
|
212
212
|
) : null}
|
|
213
|
-
<div className="flex w-full flex-row items-center justify-center gap-2 whitespace-nowrap">
|
|
213
|
+
<div className="flex w-full flex-row items-center select-none justify-center gap-2 whitespace-nowrap">
|
|
214
214
|
{props.startIcon && props.startIcon}
|
|
215
215
|
{children}
|
|
216
216
|
{props.endIcon && props.endIcon}
|
|
@@ -130,7 +130,6 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
|
|
|
130
130
|
stroke-linejoin="round"
|
|
131
131
|
height="1em"
|
|
132
132
|
width="1em"
|
|
133
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
134
133
|
>
|
|
135
134
|
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
136
135
|
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
@@ -154,7 +153,6 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
|
|
|
154
153
|
stroke-linejoin="round"
|
|
155
154
|
height="1em"
|
|
156
155
|
width="1em"
|
|
157
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
158
156
|
>
|
|
159
157
|
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
160
158
|
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
@@ -17,40 +17,85 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
|
17
17
|
const [urlsChecked, setUrlsChecked] = React.useState(false)
|
|
18
18
|
const [person, setPerson] = React.useState("pedro")
|
|
19
19
|
|
|
20
|
+
let dropdownData = {
|
|
21
|
+
items: [
|
|
22
|
+
{
|
|
23
|
+
label: "New Tab",
|
|
24
|
+
shortcut: "ctrl + T",
|
|
25
|
+
disabled: false,
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "New Windows",
|
|
29
|
+
shortcut: "ctrl + N",
|
|
30
|
+
disabled: false,
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "New Private Window",
|
|
34
|
+
shortcut: "⇧+ctrl+N",
|
|
35
|
+
disabled: true,
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
checkboxes: [
|
|
39
|
+
{
|
|
40
|
+
label: "Show Bookmarks",
|
|
41
|
+
shortcut: "ctrl + B",
|
|
42
|
+
disabled: false,
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Show Something",
|
|
46
|
+
shortcut: "ctrl + C",
|
|
47
|
+
disabled: false,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: "Show that",
|
|
51
|
+
shortcut: "ctrl + T",
|
|
52
|
+
disabled: false,
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
}
|
|
20
56
|
return (
|
|
21
57
|
<DropdownMenu.Root dir={direction}>
|
|
22
58
|
<DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
|
|
23
59
|
|
|
24
60
|
<DropdownMenu.Portal>
|
|
25
61
|
<DropdownMenu.Content
|
|
26
|
-
className="min-w-[220px] rounded
|
|
62
|
+
className="min-w-[220px] rounded bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
|
|
27
63
|
sideOffset={5}
|
|
28
64
|
>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</div>
|
|
49
|
-
</DropdownMenu.Item>
|
|
65
|
+
{dropdownData.items.map((it, i) => (
|
|
66
|
+
<DropdownMenu.Item
|
|
67
|
+
key={i}
|
|
68
|
+
className="group relative flex h-[25px] select-none items-center justify-between
|
|
69
|
+
rounded-inner px-[5px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
|
|
70
|
+
data-[highlighted]:text-violet-1 "
|
|
71
|
+
// ltr:pr-[25px] rtl:pl-[25px]
|
|
72
|
+
disabled={it.disabled}
|
|
73
|
+
>
|
|
74
|
+
{/* New Tab{" "} */}
|
|
75
|
+
{it.label}
|
|
76
|
+
<div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
77
|
+
{/* ml-auto pl-[20px] */}
|
|
78
|
+
{/* ⌘+T */}
|
|
79
|
+
{it.shortcut}
|
|
80
|
+
</div>
|
|
81
|
+
</DropdownMenu.Item>
|
|
82
|
+
))}
|
|
83
|
+
|
|
50
84
|
<DropdownMenu.Sub>
|
|
51
|
-
<DropdownMenu.SubTrigger
|
|
85
|
+
<DropdownMenu.SubTrigger
|
|
86
|
+
className=" group relative flex h-[25px] select-none
|
|
87
|
+
items-center rounded-inner justify-between flex-row
|
|
88
|
+
px-[5px] text-[13px] leading-none text-violet-11
|
|
89
|
+
outline-none data-[disabled]:pointer-events-none
|
|
90
|
+
data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9
|
|
91
|
+
data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1
|
|
92
|
+
data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ltr:pl-[25px] rtl:pl-[0px] "
|
|
93
|
+
>
|
|
52
94
|
More Tools
|
|
53
|
-
<div
|
|
95
|
+
<div
|
|
96
|
+
className="ltr:ml-auto rtl:pr-[5px] ltr:pl-[0px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white
|
|
97
|
+
rtl:mr-auto rtl:rotate-180 rtl:pl-[0px]"
|
|
98
|
+
>
|
|
54
99
|
{/* <ChevronRightIcon /> */}
|
|
55
100
|
<svg
|
|
56
101
|
aria-label="Chevron Right Icon"
|
|
@@ -70,24 +115,24 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
|
70
115
|
</DropdownMenu.SubTrigger>
|
|
71
116
|
<DropdownMenu.Portal>
|
|
72
117
|
<DropdownMenu.SubContent
|
|
73
|
-
className="min-w-[220px] rounded-
|
|
118
|
+
className="min-w-[220px] rounded-inner bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
|
|
74
119
|
sideOffset={2}
|
|
75
120
|
alignOffset={-5}
|
|
76
121
|
>
|
|
77
|
-
<DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-
|
|
122
|
+
<DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
78
123
|
Save Page As…{" "}
|
|
79
124
|
<div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
80
125
|
⌘+S
|
|
81
126
|
</div>
|
|
82
127
|
</DropdownMenu.Item>
|
|
83
|
-
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-
|
|
128
|
+
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
84
129
|
Create Shortcut…
|
|
85
130
|
</DropdownMenu.Item>
|
|
86
|
-
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-
|
|
131
|
+
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
87
132
|
Name Window…
|
|
88
133
|
</DropdownMenu.Item>
|
|
89
134
|
<DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
|
|
90
|
-
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-
|
|
135
|
+
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
91
136
|
Developer Tools
|
|
92
137
|
</DropdownMenu.Item>
|
|
93
138
|
</DropdownMenu.SubContent>
|
|
@@ -96,32 +141,42 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
|
96
141
|
|
|
97
142
|
<DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
|
|
98
143
|
|
|
144
|
+
{dropdownData.checkboxes.map((ch, i) => (
|
|
145
|
+
<DropdownMenu.CheckboxItem
|
|
146
|
+
key={i}
|
|
147
|
+
className="group relative flex h-[25px] select-none items-center
|
|
148
|
+
justify-between rounded-inner px-[5px] text-[13px] leading-none text-violet-11
|
|
149
|
+
outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
|
|
150
|
+
data-[highlighted]:text-violet-1"
|
|
151
|
+
// ltr:pl-[25px] rtl:pr-[25px]
|
|
152
|
+
checked={bookmarksChecked}
|
|
153
|
+
onCheckedChange={setBookmarksChecked}
|
|
154
|
+
>
|
|
155
|
+
<DropdownMenu.ItemIndicator className="absolute inline-flex w-[25px] items-center justify-center ltr:left-0 rtl:right-0">
|
|
156
|
+
<svg
|
|
157
|
+
aria-label="Check Mark"
|
|
158
|
+
stroke="currentColor"
|
|
159
|
+
fill="currentColor"
|
|
160
|
+
stroke-width="0"
|
|
161
|
+
viewBox="0 0 512 512"
|
|
162
|
+
height="0.60em"
|
|
163
|
+
width="0.60em"
|
|
164
|
+
>
|
|
165
|
+
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
166
|
+
</svg>{" "}
|
|
167
|
+
</DropdownMenu.ItemIndicator>
|
|
168
|
+
{/* Show Bookmarks{" "} */}
|
|
169
|
+
{ch.label}
|
|
170
|
+
<div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
171
|
+
{/* ml-auto pl-[20px] */}
|
|
172
|
+
{/* ⌘+B */}
|
|
173
|
+
{ch.shortcut}
|
|
174
|
+
</div>
|
|
175
|
+
</DropdownMenu.CheckboxItem>
|
|
176
|
+
))}
|
|
177
|
+
{/*
|
|
99
178
|
<DropdownMenu.CheckboxItem
|
|
100
|
-
className="
|
|
101
|
-
checked={bookmarksChecked}
|
|
102
|
-
onCheckedChange={setBookmarksChecked}
|
|
103
|
-
>
|
|
104
|
-
<DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
|
|
105
|
-
<svg
|
|
106
|
-
aria-label="Check Mark"
|
|
107
|
-
stroke="currentColor"
|
|
108
|
-
fill="currentColor"
|
|
109
|
-
stroke-width="0"
|
|
110
|
-
viewBox="0 0 512 512"
|
|
111
|
-
height="0.60em"
|
|
112
|
-
width="0.60em"
|
|
113
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
114
|
-
>
|
|
115
|
-
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
116
|
-
</svg>{" "}
|
|
117
|
-
</DropdownMenu.ItemIndicator>
|
|
118
|
-
Show Bookmarks{" "}
|
|
119
|
-
<div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
120
|
-
⌘+B
|
|
121
|
-
</div>
|
|
122
|
-
</DropdownMenu.CheckboxItem>
|
|
123
|
-
<DropdownMenu.CheckboxItem
|
|
124
|
-
className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
179
|
+
className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
125
180
|
checked={urlsChecked}
|
|
126
181
|
onCheckedChange={setUrlsChecked}
|
|
127
182
|
>
|
|
@@ -134,13 +189,12 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
|
134
189
|
viewBox="0 0 512 512"
|
|
135
190
|
height="0.60em"
|
|
136
191
|
width="0.60em"
|
|
137
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
138
192
|
>
|
|
139
193
|
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
140
194
|
</svg>{" "}
|
|
141
195
|
</DropdownMenu.ItemIndicator>
|
|
142
196
|
Show Full URLs
|
|
143
|
-
</DropdownMenu.CheckboxItem>
|
|
197
|
+
</DropdownMenu.CheckboxItem> */}
|
|
144
198
|
|
|
145
199
|
<DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
|
|
146
200
|
|
|
@@ -149,7 +203,7 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
|
149
203
|
</DropdownMenu.Label>
|
|
150
204
|
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
|
|
151
205
|
<DropdownMenu.RadioItem
|
|
152
|
-
className="relative flex h-[25px] select-none items-center rounded-
|
|
206
|
+
className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
153
207
|
value="pedro"
|
|
154
208
|
>
|
|
155
209
|
<DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
|
|
@@ -169,7 +223,7 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
|
169
223
|
Pedro Duarte
|
|
170
224
|
</DropdownMenu.RadioItem>
|
|
171
225
|
<DropdownMenu.RadioItem
|
|
172
|
-
className="relative flex h-[25px] select-none items-center rounded-
|
|
226
|
+
className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
173
227
|
value="colm"
|
|
174
228
|
>
|
|
175
229
|
<DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
|
|
@@ -120,7 +120,6 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
|
|
|
120
120
|
aria-hidden="true"
|
|
121
121
|
fill="currentColor"
|
|
122
122
|
viewBox="0 0 20 20"
|
|
123
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
124
123
|
>
|
|
125
124
|
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
|
|
126
125
|
</svg>
|
|
@@ -36,7 +36,6 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
|
|
|
36
36
|
width="32px"
|
|
37
37
|
height="32px"
|
|
38
38
|
viewBox="0 0 32 32"
|
|
39
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
40
39
|
className="h-7 w-7"
|
|
41
40
|
>
|
|
42
41
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
|
|
@@ -47,7 +46,6 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
|
|
|
47
46
|
logoElement = (
|
|
48
47
|
<svg
|
|
49
48
|
version="1.1"
|
|
50
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
51
49
|
x="0px"
|
|
52
50
|
y="0px"
|
|
53
51
|
className="h-5 w-5"
|
|
@@ -124,7 +122,6 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
|
|
|
124
122
|
logoElement = (
|
|
125
123
|
<svg
|
|
126
124
|
version="1.1"
|
|
127
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
128
125
|
viewBox="0 0 223 223"
|
|
129
126
|
className="h-6 w-6"
|
|
130
127
|
>
|
|
@@ -6,7 +6,7 @@ type THawaSnackBar = {
|
|
|
6
6
|
severity: "info" | "warning" | "error" | "success" | "none"
|
|
7
7
|
title: string
|
|
8
8
|
description: string
|
|
9
|
-
|
|
9
|
+
onCloseSnakbar?: () => void
|
|
10
10
|
duration?: number
|
|
11
11
|
position?:
|
|
12
12
|
| "top-left"
|
|
@@ -31,6 +31,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
|
|
|
31
31
|
severity = "info",
|
|
32
32
|
position = "bottom-left",
|
|
33
33
|
actions,
|
|
34
|
+
onCloseSnakbar,
|
|
34
35
|
// handleClose,
|
|
35
36
|
duration,
|
|
36
37
|
}) => {
|
|
@@ -110,7 +111,10 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
|
|
|
110
111
|
className="right-0 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
|
|
111
112
|
data-dismiss-target="#toast-default"
|
|
112
113
|
aria-label="Close"
|
|
113
|
-
onClick={() =>
|
|
114
|
+
onClick={() => {
|
|
115
|
+
onCloseSnakbar()
|
|
116
|
+
setClosed(true)
|
|
117
|
+
}}
|
|
114
118
|
>
|
|
115
119
|
<span className="sr-only">Close</span>
|
|
116
120
|
<svg
|
|
@@ -118,7 +122,6 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
|
|
|
118
122
|
className="h-5 w-5"
|
|
119
123
|
fill="currentColor"
|
|
120
124
|
viewBox="0 0 20 20"
|
|
121
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
122
125
|
>
|
|
123
126
|
<path
|
|
124
127
|
fillRule="evenodd"
|
|
@@ -1,22 +1,31 @@
|
|
|
1
1
|
import React, { FC } from "react"
|
|
2
2
|
import clsx from "clsx"
|
|
3
3
|
import { HawaSpinner } from "./HawaSpinner"
|
|
4
|
+
import { BsFilesAlt } from "react-icons/bs"
|
|
4
5
|
|
|
5
6
|
type StatTypes = {
|
|
6
7
|
label?: string
|
|
7
8
|
color?: string
|
|
8
9
|
number?: string
|
|
9
10
|
helperText?: string
|
|
10
|
-
|
|
11
|
+
icon?: any
|
|
12
|
+
variant?:
|
|
13
|
+
| "default"
|
|
14
|
+
| "plain"
|
|
15
|
+
| "contained"
|
|
16
|
+
| "outlined"
|
|
17
|
+
| "brutalist"
|
|
18
|
+
| "dropshadow"
|
|
11
19
|
width?: "full" | "min" | "normal"
|
|
12
20
|
isLoading?: boolean
|
|
13
21
|
handleClick?: () => void
|
|
14
22
|
}
|
|
15
|
-
export const HawaStats: FC<StatTypes> = (props) => {
|
|
23
|
+
export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
|
|
16
24
|
let defaultStyle =
|
|
17
25
|
"flex transition-all flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
|
|
18
26
|
let statStyles = {
|
|
19
27
|
plain: "",
|
|
28
|
+
default: "border bg-card text-card-foreground shadow-sm",
|
|
20
29
|
contained: "bg-layoutPrimary-500",
|
|
21
30
|
outlined: "ring-2 w-fit",
|
|
22
31
|
neobrutalism: "shadow-neobrutalism border-4 border-black bg-white",
|
|
@@ -34,20 +43,21 @@ export const HawaStats: FC<StatTypes> = (props) => {
|
|
|
34
43
|
className={clsx(
|
|
35
44
|
defaultStyle,
|
|
36
45
|
widthStyles[props.width],
|
|
37
|
-
statStyles[
|
|
46
|
+
statStyles[variant],
|
|
38
47
|
props.handleClick ? "cursor-pointer" : "cursor-default",
|
|
39
|
-
props.handleClick &&
|
|
48
|
+
props.handleClick && variant === "dropshadow"
|
|
40
49
|
? "hover:drop-shadow-lg"
|
|
41
50
|
: ""
|
|
42
51
|
)}
|
|
43
52
|
style={{
|
|
44
53
|
backgroundColor: props.color
|
|
45
54
|
? props.color
|
|
46
|
-
:
|
|
55
|
+
: variant === "contained"
|
|
47
56
|
? "var(--layout-primary-500)"
|
|
48
57
|
: "",
|
|
49
58
|
}}
|
|
50
59
|
>
|
|
60
|
+
{props.icon && <div className="mb-2">{props.icon} </div>}
|
|
51
61
|
<div>{props.label}</div>
|
|
52
62
|
{props.isLoading ? (
|
|
53
63
|
<HawaSpinner />
|
|
@@ -55,7 +65,7 @@ export const HawaStats: FC<StatTypes> = (props) => {
|
|
|
55
65
|
<div className="text-2xl font-bold">{props.number}</div>
|
|
56
66
|
)}
|
|
57
67
|
{props.helperText ? (
|
|
58
|
-
<div className="text-xs">{props.helperText}</div>
|
|
68
|
+
<div className="text-xs text-muted-foreground">{props.helperText}</div>
|
|
59
69
|
) : null}
|
|
60
70
|
</div>
|
|
61
71
|
)
|
|
@@ -60,7 +60,6 @@ export const HawaStepper: FC<THawaTimeline> = ({
|
|
|
60
60
|
viewBox="0 0 512 512"
|
|
61
61
|
height="0.60em"
|
|
62
62
|
width="0.60em"
|
|
63
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
64
63
|
>
|
|
65
64
|
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
66
65
|
</svg>
|
|
@@ -141,7 +141,6 @@ export const HawaTable: FC<TableTypes> = ({
|
|
|
141
141
|
viewBox="0 0 512 512"
|
|
142
142
|
height="1em"
|
|
143
143
|
width="1em"
|
|
144
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
145
144
|
>
|
|
146
145
|
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
|
|
147
146
|
</svg>
|
|
@@ -161,7 +160,6 @@ export const HawaTable: FC<TableTypes> = ({
|
|
|
161
160
|
viewBox="0 0 16 16"
|
|
162
161
|
height="1em"
|
|
163
162
|
width="1em"
|
|
164
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
165
163
|
>
|
|
166
164
|
<path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
|
|
167
165
|
</svg>
|
|
@@ -175,7 +173,6 @@ export const HawaTable: FC<TableTypes> = ({
|
|
|
175
173
|
viewBox="0 0 16 16"
|
|
176
174
|
height="1em"
|
|
177
175
|
width="1em"
|
|
178
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
179
176
|
>
|
|
180
177
|
<path
|
|
181
178
|
fill-rule="evenodd"
|
|
@@ -362,7 +359,6 @@ export const HawaTable: FC<TableTypes> = ({
|
|
|
362
359
|
viewBox="0 0 16 16"
|
|
363
360
|
height="1em"
|
|
364
361
|
width="1em"
|
|
365
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
366
362
|
>
|
|
367
363
|
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
|
|
368
364
|
</svg>
|
|
@@ -423,7 +419,6 @@ export const HawaTable: FC<TableTypes> = ({
|
|
|
423
419
|
viewBox="0 0 16 16"
|
|
424
420
|
height="1em"
|
|
425
421
|
width="1em"
|
|
426
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
427
422
|
>
|
|
428
423
|
<path
|
|
429
424
|
fill-rule="evenodd"
|
|
@@ -534,7 +529,6 @@ export const HawaTable: FC<TableTypes> = ({
|
|
|
534
529
|
viewBox="0 0 16 16"
|
|
535
530
|
height="1em"
|
|
536
531
|
width="1em"
|
|
537
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
538
532
|
>
|
|
539
533
|
<path
|
|
540
534
|
fill-rule="evenodd"
|