mayak-common-library 0.0.13 → 0.0.14

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 (7) hide show
  1. package/dist/index.css +0 -497
  2. package/dist/index.d.mts +45 -2
  3. package/dist/index.d.ts +45 -2
  4. package/dist/index.js +470 -9
  5. package/dist/index.mjs +463 -9
  6. package/package.json +3 -1
  7. package/tailwind.config.js +8 -0
package/dist/index.css CHANGED
@@ -32,501 +32,4 @@
32
32
  animation: fade-In 0.5s;
33
33
  }
34
34
 
35
- /* src/styles/globals.css */
36
- *,
37
- ::before,
38
- ::after {
39
- --tw-border-spacing-x: 0;
40
- --tw-border-spacing-y: 0;
41
- --tw-translate-x: 0;
42
- --tw-translate-y: 0;
43
- --tw-rotate: 0;
44
- --tw-skew-x: 0;
45
- --tw-skew-y: 0;
46
- --tw-scale-x: 1;
47
- --tw-scale-y: 1;
48
- --tw-pan-x: ;
49
- --tw-pan-y: ;
50
- --tw-pinch-zoom: ;
51
- --tw-scroll-snap-strictness: proximity;
52
- --tw-gradient-from-position: ;
53
- --tw-gradient-via-position: ;
54
- --tw-gradient-to-position: ;
55
- --tw-ordinal: ;
56
- --tw-slashed-zero: ;
57
- --tw-numeric-figure: ;
58
- --tw-numeric-spacing: ;
59
- --tw-numeric-fraction: ;
60
- --tw-ring-inset: ;
61
- --tw-ring-offset-width: 0px;
62
- --tw-ring-offset-color: #fff;
63
- --tw-ring-color: rgb(59 130 246 / 0.5);
64
- --tw-ring-offset-shadow: 0 0 #0000;
65
- --tw-ring-shadow: 0 0 #0000;
66
- --tw-shadow: 0 0 #0000;
67
- --tw-shadow-colored: 0 0 #0000;
68
- --tw-blur: ;
69
- --tw-brightness: ;
70
- --tw-contrast: ;
71
- --tw-grayscale: ;
72
- --tw-hue-rotate: ;
73
- --tw-invert: ;
74
- --tw-saturate: ;
75
- --tw-sepia: ;
76
- --tw-drop-shadow: ;
77
- --tw-backdrop-blur: ;
78
- --tw-backdrop-brightness: ;
79
- --tw-backdrop-contrast: ;
80
- --tw-backdrop-grayscale: ;
81
- --tw-backdrop-hue-rotate: ;
82
- --tw-backdrop-invert: ;
83
- --tw-backdrop-opacity: ;
84
- --tw-backdrop-saturate: ;
85
- --tw-backdrop-sepia: ;
86
- --tw-contain-size: ;
87
- --tw-contain-layout: ;
88
- --tw-contain-paint: ;
89
- --tw-contain-style: ;
90
- }
91
- ::backdrop {
92
- --tw-border-spacing-x: 0;
93
- --tw-border-spacing-y: 0;
94
- --tw-translate-x: 0;
95
- --tw-translate-y: 0;
96
- --tw-rotate: 0;
97
- --tw-skew-x: 0;
98
- --tw-skew-y: 0;
99
- --tw-scale-x: 1;
100
- --tw-scale-y: 1;
101
- --tw-pan-x: ;
102
- --tw-pan-y: ;
103
- --tw-pinch-zoom: ;
104
- --tw-scroll-snap-strictness: proximity;
105
- --tw-gradient-from-position: ;
106
- --tw-gradient-via-position: ;
107
- --tw-gradient-to-position: ;
108
- --tw-ordinal: ;
109
- --tw-slashed-zero: ;
110
- --tw-numeric-figure: ;
111
- --tw-numeric-spacing: ;
112
- --tw-numeric-fraction: ;
113
- --tw-ring-inset: ;
114
- --tw-ring-offset-width: 0px;
115
- --tw-ring-offset-color: #fff;
116
- --tw-ring-color: rgb(59 130 246 / 0.5);
117
- --tw-ring-offset-shadow: 0 0 #0000;
118
- --tw-ring-shadow: 0 0 #0000;
119
- --tw-shadow: 0 0 #0000;
120
- --tw-shadow-colored: 0 0 #0000;
121
- --tw-blur: ;
122
- --tw-brightness: ;
123
- --tw-contrast: ;
124
- --tw-grayscale: ;
125
- --tw-hue-rotate: ;
126
- --tw-invert: ;
127
- --tw-saturate: ;
128
- --tw-sepia: ;
129
- --tw-drop-shadow: ;
130
- --tw-backdrop-blur: ;
131
- --tw-backdrop-brightness: ;
132
- --tw-backdrop-contrast: ;
133
- --tw-backdrop-grayscale: ;
134
- --tw-backdrop-hue-rotate: ;
135
- --tw-backdrop-invert: ;
136
- --tw-backdrop-opacity: ;
137
- --tw-backdrop-saturate: ;
138
- --tw-backdrop-sepia: ;
139
- --tw-contain-size: ;
140
- --tw-contain-layout: ;
141
- --tw-contain-paint: ;
142
- --tw-contain-style: ;
143
- }
144
- .container {
145
- width: 100%;
146
- }
147
- @media (min-width: 640px) {
148
- .container {
149
- max-width: 640px;
150
- }
151
- }
152
- @media (min-width: 768px) {
153
- .container {
154
- max-width: 768px;
155
- }
156
- }
157
- @media (min-width: 1024px) {
158
- .container {
159
- max-width: 1024px;
160
- }
161
- }
162
- @media (min-width: 1280px) {
163
- .container {
164
- max-width: 1280px;
165
- }
166
- }
167
- @media (min-width: 1536px) {
168
- .container {
169
- max-width: 1536px;
170
- }
171
- }
172
- .nav-item.active {
173
- --tw-text-opacity: 1;
174
- color: rgb(200 188 161 / var(--tw-text-opacity));
175
- }
176
- .nav-item {
177
- padding: 0.5rem;
178
- --tw-text-opacity: 1;
179
- color: rgb(52 52 52 / var(--tw-text-opacity));
180
- text-decoration: none;
181
- cursor: pointer;
182
- font-weight: 800;
183
- font-size: 12px;
184
- text-transform: uppercase;
185
- }
186
- .nav-indicator {
187
- position: absolute;
188
- top: 0px;
189
- border-radius: 9999px;
190
- --tw-bg-opacity: 1;
191
- background-color: rgb(200 188 161 / var(--tw-bg-opacity));
192
- width: 7px;
193
- height: 7px;
194
- transition: transform 0.3s ease-out;
195
- }
196
- body :is(.absolute) {
197
- position: absolute;
198
- }
199
- body :is(.relative) {
200
- position: relative;
201
- }
202
- body :is(.z-50) {
203
- z-index: 50;
204
- }
205
- body :is(.ml-0) {
206
- margin-left: 0px;
207
- }
208
- body :is(.flex) {
209
- display: flex;
210
- }
211
- body :is(.h-12) {
212
- height: 3rem;
213
- }
214
- body :is(.h-6) {
215
- height: 1.5rem;
216
- }
217
- body :is(.h-8) {
218
- height: 2rem;
219
- }
220
- body :is(.h-9) {
221
- height: 2.25rem;
222
- }
223
- body :is(.h-fit) {
224
- height: -moz-fit-content;
225
- height: fit-content;
226
- }
227
- body :is(.w-fit) {
228
- width: -moz-fit-content;
229
- width: fit-content;
230
- }
231
- body :is(.min-w-10) {
232
- min-width: 2.5rem;
233
- }
234
- body :is(.transform) {
235
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
236
- }
237
- body :is(.flex-row) {
238
- flex-direction: row;
239
- }
240
- body :is(.flex-row-reverse) {
241
- flex-direction: row-reverse;
242
- }
243
- body :is(.flex-col) {
244
- flex-direction: column;
245
- }
246
- body :is(.flex-wrap) {
247
- flex-wrap: wrap;
248
- }
249
- body :is(.flex-nowrap) {
250
- flex-wrap: nowrap;
251
- }
252
- body :is(.justify-start) {
253
- justify-content: flex-start;
254
- }
255
- body :is(.justify-end) {
256
- justify-content: flex-end;
257
- }
258
- body :is(.justify-between) {
259
- justify-content: space-between;
260
- }
261
- body :is(.gap-0) {
262
- gap: 0px;
263
- }
264
- body :is(.gap-2) {
265
- gap: 0.5rem;
266
- }
267
- body :is(.gap-3) {
268
- gap: 0.75rem;
269
- }
270
- body :is(.gap-x-1) {
271
- column-gap: 0.25rem;
272
- }
273
- body :is(.gap-x-2) {
274
- column-gap: 0.5rem;
275
- }
276
- body :is(.gap-x-5) {
277
- column-gap: 1.25rem;
278
- }
279
- body :is(.gap-y-3) {
280
- row-gap: 0.75rem;
281
- }
282
- body :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
283
- --tw-space-y-reverse: 0;
284
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
285
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
286
- }
287
- body :is(.self-end) {
288
- align-self: flex-end;
289
- }
290
- body :is(.rounded-none) {
291
- border-radius: 0px;
292
- }
293
- body :is(.border) {
294
- border-width: 1px;
295
- }
296
- body :is(.border-b) {
297
- border-bottom-width: 1px;
298
- }
299
- body :is(.border-solid) {
300
- border-style: solid;
301
- }
302
- body :is(.border-none) {
303
- border-style: none;
304
- }
305
- body :is(.\!border-transparent) {
306
- border-color: transparent !important;
307
- }
308
- body :is(.border-accent-beige) {
309
- --tw-border-opacity: 1;
310
- border-color: rgb(200 188 161 / var(--tw-border-opacity));
311
- }
312
- body :is(.border-accent-dark) {
313
- --tw-border-opacity: 1;
314
- border-color: rgb(52 52 52 / var(--tw-border-opacity));
315
- }
316
- body :is(.border-black) {
317
- --tw-border-opacity: 1;
318
- border-color: rgb(0 0 0 / var(--tw-border-opacity));
319
- }
320
- body :is(.bg-accent-beige) {
321
- --tw-bg-opacity: 1;
322
- background-color: rgb(200 188 161 / var(--tw-bg-opacity));
323
- }
324
- body :is(.bg-accent-dark) {
325
- --tw-bg-opacity: 1;
326
- background-color: rgb(52 52 52 / var(--tw-bg-opacity));
327
- }
328
- body :is(.bg-accent-silver) {
329
- --tw-bg-opacity: 1;
330
- background-color: rgb(245 245 245 / var(--tw-bg-opacity));
331
- }
332
- body :is(.bg-accent-white) {
333
- --tw-bg-opacity: 1;
334
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
335
- }
336
- body :is(.bg-neutral-100) {
337
- --tw-bg-opacity: 1;
338
- background-color: rgb(245 245 245 / var(--tw-bg-opacity));
339
- }
340
- body :is(.bg-transparent) {
341
- background-color: transparent;
342
- }
343
- body :is(.bg-white) {
344
- --tw-bg-opacity: 1;
345
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
346
- }
347
- body :is(.p-0) {
348
- padding: 0px;
349
- }
350
- body :is(.p-1) {
351
- padding: 0.25rem;
352
- }
353
- body :is(.p-3) {
354
- padding: 0.75rem;
355
- }
356
- body :is(.p-5) {
357
- padding: 1.25rem;
358
- }
359
- body :is(.px-10) {
360
- padding-left: 2.5rem;
361
- padding-right: 2.5rem;
362
- }
363
- body :is(.px-2) {
364
- padding-left: 0.5rem;
365
- padding-right: 0.5rem;
366
- }
367
- body :is(.px-2\.5) {
368
- padding-left: 0.625rem;
369
- padding-right: 0.625rem;
370
- }
371
- body :is(.px-3) {
372
- padding-left: 0.75rem;
373
- padding-right: 0.75rem;
374
- }
375
- body :is(.px-4) {
376
- padding-left: 1rem;
377
- padding-right: 1rem;
378
- }
379
- body :is(.px-7) {
380
- padding-left: 1.75rem;
381
- padding-right: 1.75rem;
382
- }
383
- body :is(.py-0) {
384
- padding-top: 0px;
385
- padding-bottom: 0px;
386
- }
387
- body :is(.py-1) {
388
- padding-top: 0.25rem;
389
- padding-bottom: 0.25rem;
390
- }
391
- body :is(.py-1\.5) {
392
- padding-top: 0.375rem;
393
- padding-bottom: 0.375rem;
394
- }
395
- body :is(.py-2) {
396
- padding-top: 0.5rem;
397
- padding-bottom: 0.5rem;
398
- }
399
- body :is(.py-5) {
400
- padding-top: 1.25rem;
401
- padding-bottom: 1.25rem;
402
- }
403
- body :is(.text-base) {
404
- font-size: 1rem;
405
- line-height: 1.5rem;
406
- }
407
- body :is(.text-sm) {
408
- font-size: 0.875rem;
409
- line-height: 1.25rem;
410
- }
411
- body :is(.text-xs) {
412
- font-size: 0.75rem;
413
- line-height: 1rem;
414
- }
415
- body :is(.font-extrabold) {
416
- font-weight: 800;
417
- }
418
- body :is(.font-normal) {
419
- font-weight: 400;
420
- }
421
- body :is(.normal-case) {
422
- text-transform: none;
423
- }
424
- body :is(.leading-3) {
425
- line-height: .75rem;
426
- }
427
- body :is(.leading-4) {
428
- line-height: 1rem;
429
- }
430
- body :is(.leading-6) {
431
- line-height: 1.5rem;
432
- }
433
- body :is(.text-accent-dark) {
434
- --tw-text-opacity: 1;
435
- color: rgb(52 52 52 / var(--tw-text-opacity));
436
- }
437
- body :is(.text-accent-silver-2) {
438
- --tw-text-opacity: 1;
439
- color: rgb(147 147 147 / var(--tw-text-opacity));
440
- }
441
- body :is(.text-accent-white) {
442
- --tw-text-opacity: 1;
443
- color: rgb(255 255 255 / var(--tw-text-opacity));
444
- }
445
- body :is(.text-white) {
446
- --tw-text-opacity: 1;
447
- color: rgb(255 255 255 / var(--tw-text-opacity));
448
- }
449
- body :is(.shadow-none) {
450
- --tw-shadow: 0 0 #0000;
451
- --tw-shadow-colored: 0 0 #0000;
452
- box-shadow:
453
- var(--tw-ring-offset-shadow, 0 0 #0000),
454
- var(--tw-ring-shadow, 0 0 #0000),
455
- var(--tw-shadow);
456
- }
457
- body :is(.shadow-sm) {
458
- --tw-shadow: 0 8px 24px 0 #00000029;
459
- --tw-shadow-colored: 0 8px 24px 0 var(--tw-shadow-color);
460
- box-shadow:
461
- var(--tw-ring-offset-shadow, 0 0 #0000),
462
- var(--tw-ring-shadow, 0 0 #0000),
463
- var(--tw-shadow);
464
- }
465
- body :is(.invert) {
466
- --tw-invert: invert(100%);
467
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
468
- }
469
- body :is(.sepia) {
470
- --tw-sepia: sepia(100%);
471
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
472
- }
473
- body :is(.filter) {
474
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
475
- }
476
- body :is(.transition) {
477
- transition-property:
478
- color,
479
- background-color,
480
- border-color,
481
- text-decoration-color,
482
- fill,
483
- stroke,
484
- opacity,
485
- box-shadow,
486
- transform,
487
- filter,
488
- -webkit-backdrop-filter;
489
- transition-property:
490
- color,
491
- background-color,
492
- border-color,
493
- text-decoration-color,
494
- fill,
495
- stroke,
496
- opacity,
497
- box-shadow,
498
- transform,
499
- filter,
500
- backdrop-filter;
501
- transition-property:
502
- color,
503
- background-color,
504
- border-color,
505
- text-decoration-color,
506
- fill,
507
- stroke,
508
- opacity,
509
- box-shadow,
510
- transform,
511
- filter,
512
- backdrop-filter,
513
- -webkit-backdrop-filter;
514
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
515
- transition-duration: 150ms;
516
- }
517
- body :is(.ease-in-out) {
518
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
519
- }
520
- body :is(.hover\:bg-accent-beige:hover) {
521
- --tw-bg-opacity: 1;
522
- background-color: rgb(200 188 161 / var(--tw-bg-opacity));
523
- }
524
- body :is(.hover\:bg-transparent:hover) {
525
- background-color: transparent;
526
- }
527
- body :is(.hover\:bg-white:hover) {
528
- --tw-bg-opacity: 1;
529
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
530
- }
531
-
532
35
  /* src/components/AppBar/styles.css */
package/dist/index.d.mts CHANGED
@@ -104,10 +104,53 @@ declare const Providers: FC<PropsWithChildren>;
104
104
 
105
105
  interface AppBarProps {
106
106
  links: {
107
- href: string;
107
+ path: string;
108
108
  title: string;
109
109
  }[];
110
110
  }
111
111
  declare const AppBar: FC<AppBarProps>;
112
112
 
113
- export { AppBar, CustomAvatar as Avatar, CustomBadge as Badge, Button, CustomChip as Chip, FromToInput, Greet, IconButton, CustomInput as Input, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, Text };
113
+ interface ImageContainerProps {
114
+ src: any;
115
+ alt: string;
116
+ contentful?: boolean;
117
+ priority?: boolean;
118
+ loading?: "lazy" | "eager" | undefined;
119
+ width?: string;
120
+ height?: string;
121
+ objectFit?: string;
122
+ }
123
+ declare const ImageContainer: FC<ImageContainerProps>;
124
+
125
+ interface CategoryCardProps {
126
+ image_url?: string;
127
+ title: string;
128
+ text: string;
129
+ link: string;
130
+ }
131
+ declare const CategoryCard: FC<CategoryCardProps>;
132
+
133
+ interface ArticleCardProps {
134
+ image_src?: string;
135
+ }
136
+ declare const ArticleCard: FC<ArticleCardProps>;
137
+
138
+ interface JobCardProps {
139
+ }
140
+ declare const JobCard: FC<JobCardProps>;
141
+
142
+ declare const RealtorCard: () => react_jsx_runtime.JSX.Element;
143
+
144
+ interface RealtyCardProps {
145
+ }
146
+ declare const RealtyCard: FC<RealtyCardProps>;
147
+
148
+ interface TeamPersonCardProps {
149
+ image_url?: string;
150
+ name: string;
151
+ position: string;
152
+ text: string;
153
+ }
154
+ declare const TeamPersonCard: FC<TeamPersonCardProps>;
155
+
156
+ export { AppBar, ArticleCard, CustomAvatar as Avatar, CustomBadge as Badge, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text };
package/dist/index.d.ts CHANGED
@@ -104,10 +104,53 @@ declare const Providers: FC<PropsWithChildren>;
104
104
 
105
105
  interface AppBarProps {
106
106
  links: {
107
- href: string;
107
+ path: string;
108
108
  title: string;
109
109
  }[];
110
110
  }
111
111
  declare const AppBar: FC<AppBarProps>;
112
112
 
113
- export { AppBar, CustomAvatar as Avatar, CustomBadge as Badge, Button, CustomChip as Chip, FromToInput, Greet, IconButton, CustomInput as Input, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, Text };
113
+ interface ImageContainerProps {
114
+ src: any;
115
+ alt: string;
116
+ contentful?: boolean;
117
+ priority?: boolean;
118
+ loading?: "lazy" | "eager" | undefined;
119
+ width?: string;
120
+ height?: string;
121
+ objectFit?: string;
122
+ }
123
+ declare const ImageContainer: FC<ImageContainerProps>;
124
+
125
+ interface CategoryCardProps {
126
+ image_url?: string;
127
+ title: string;
128
+ text: string;
129
+ link: string;
130
+ }
131
+ declare const CategoryCard: FC<CategoryCardProps>;
132
+
133
+ interface ArticleCardProps {
134
+ image_src?: string;
135
+ }
136
+ declare const ArticleCard: FC<ArticleCardProps>;
137
+
138
+ interface JobCardProps {
139
+ }
140
+ declare const JobCard: FC<JobCardProps>;
141
+
142
+ declare const RealtorCard: () => react_jsx_runtime.JSX.Element;
143
+
144
+ interface RealtyCardProps {
145
+ }
146
+ declare const RealtyCard: FC<RealtyCardProps>;
147
+
148
+ interface TeamPersonCardProps {
149
+ image_url?: string;
150
+ name: string;
151
+ position: string;
152
+ text: string;
153
+ }
154
+ declare const TeamPersonCard: FC<TeamPersonCardProps>;
155
+
156
+ export { AppBar, ArticleCard, CustomAvatar as Avatar, CustomBadge as Badge, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text };