@sikka/hawa 0.0.271 → 0.0.274

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 (38) hide show
  1. package/dist/styles.css +180 -9
  2. package/es/blocks/Pricing/HorizontalPricing.d.ts +47 -0
  3. package/es/blocks/Pricing/index.d.ts +1 -0
  4. package/es/elements/HawaLandingCard.d.ts +1 -0
  5. package/es/elements/HawaLoading.d.ts +8 -0
  6. package/es/elements/HawaRadio.d.ts +7 -10
  7. package/es/elements/index.d.ts +1 -1
  8. package/es/index.es.js +3 -3
  9. package/es/layout/HawaGrid.d.ts +6 -0
  10. package/es/layout/index.d.ts +1 -0
  11. package/lib/blocks/Pricing/HorizontalPricing.d.ts +47 -0
  12. package/lib/blocks/Pricing/index.d.ts +1 -0
  13. package/lib/elements/HawaLandingCard.d.ts +1 -0
  14. package/lib/elements/HawaLoading.d.ts +8 -0
  15. package/lib/elements/HawaRadio.d.ts +7 -10
  16. package/lib/elements/index.d.ts +1 -1
  17. package/lib/index.js +3 -3
  18. package/lib/layout/HawaGrid.d.ts +6 -0
  19. package/lib/layout/index.d.ts +1 -0
  20. package/package.json +2 -1
  21. package/src/blocks/Pricing/HorizontalPricing.tsx +140 -0
  22. package/src/blocks/Pricing/index.ts +1 -0
  23. package/src/elements/HawaButton.tsx +16 -21
  24. package/src/elements/HawaCodeBlock.tsx +4 -12
  25. package/src/elements/HawaLandingCard.tsx +12 -10
  26. package/src/elements/HawaLoading.tsx +83 -0
  27. package/src/elements/HawaPhoneInput.tsx +5 -1
  28. package/src/elements/HawaRadio.tsx +9 -11
  29. package/src/elements/HawaStats.tsx +3 -3
  30. package/src/elements/index.ts +1 -1
  31. package/src/layout/HawaGrid.tsx +15 -0
  32. package/src/layout/index.ts +1 -0
  33. package/src/styles.css +180 -9
  34. package/src/tailwind.css +23 -1
  35. package/tailwind.config.js +22 -9
  36. package/es/elements/HawaSpinner.d.ts +0 -6
  37. package/lib/elements/HawaSpinner.d.ts +0 -6
  38. package/src/elements/HawaSpinner.tsx +0 -42
package/dist/styles.css CHANGED
@@ -398,7 +398,6 @@ video {
398
398
  --button-secondary-500: #ffc011;
399
399
  --button-secondary-700: #b48d24;
400
400
 
401
-
402
401
  --card: 0 0% 100%;
403
402
  --card-foreground: 240 10% 3.9%;
404
403
 
@@ -410,6 +409,29 @@ video {
410
409
  var(--border-radius) - calc(var(--border-radius) / 3)
411
410
  );
412
411
  }
412
+
413
+ .dark {
414
+ --background: 240 10% 3.9%;
415
+ --foreground: 0 0% 98%;
416
+ --card: 240 10% 3.9%;
417
+ --card-foreground: 0 0% 98%;
418
+ --popover: 240 10% 3.9%;
419
+ --popover-foreground: 0 0% 98%;
420
+ --primary: 0 0% 98%;
421
+ --primary-foreground: 240 5.9% 10%;
422
+ --secondary: 240 3.7% 15.9%;
423
+ --secondary-foreground: 0 0% 98%;
424
+ --muted: 240 3.7% 15.9%;
425
+ --muted-foreground: 240 5% 64.9%;
426
+ --accent: 240 3.7% 15.9%;
427
+ --accent-foreground: 0 0% 98%;
428
+ --destructive: 0 62.8% 30.6%;
429
+ --destructive-foreground: 0 0% 98%;
430
+ --border: 240 3.7% 15.9%;
431
+ --input: 240 3.7% 15.9%;
432
+ --ring: 240 4.9% 83.9%;
433
+ }
434
+
413
435
  .link::after {
414
436
  content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
415
437
  display: inline-block;
@@ -1225,6 +1247,9 @@ video {
1225
1247
  min-width: -moz-min-content;
1226
1248
  min-width: min-content;
1227
1249
  }
1250
+ .max-w-2xl {
1251
+ max-width: 42rem;
1252
+ }
1228
1253
  .max-w-2xs {
1229
1254
  max-width: 250px;
1230
1255
  }
@@ -1247,6 +1272,9 @@ video {
1247
1272
  .max-w-md {
1248
1273
  max-width: 28rem;
1249
1274
  }
1275
+ .max-w-screen-sm {
1276
+ max-width: 640px;
1277
+ }
1250
1278
  .max-w-sm {
1251
1279
  max-width: 24rem;
1252
1280
  }
@@ -1311,6 +1339,21 @@ video {
1311
1339
  .transform-gpu {
1312
1340
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1313
1341
  }
1342
+ @keyframes bounce {
1343
+
1344
+ 0%, 100% {
1345
+ transform: translateY(-25%);
1346
+ animation-timing-function: cubic-bezier(0.8,0,1,1);
1347
+ }
1348
+
1349
+ 50% {
1350
+ transform: none;
1351
+ animation-timing-function: cubic-bezier(0,0,0.2,1);
1352
+ }
1353
+ }
1354
+ .animate-bounce {
1355
+ animation: bounce 1s infinite;
1356
+ }
1314
1357
  @keyframes spin {
1315
1358
 
1316
1359
  to {
@@ -1342,6 +1385,10 @@ video {
1342
1385
  -moz-appearance: none;
1343
1386
  appearance: none;
1344
1387
  }
1388
+ .columns-1 {
1389
+ -moz-columns: 1;
1390
+ columns: 1;
1391
+ }
1345
1392
  .grid-cols-2 {
1346
1393
  grid-template-columns: repeat(2, minmax(0, 1fr));
1347
1394
  }
@@ -1411,9 +1458,15 @@ video {
1411
1458
  .gap-20 {
1412
1459
  gap: 5rem;
1413
1460
  }
1461
+ .gap-24 {
1462
+ gap: 6rem;
1463
+ }
1414
1464
  .gap-4 {
1415
1465
  gap: 1rem;
1416
1466
  }
1467
+ .gap-5 {
1468
+ gap: 1.25rem;
1469
+ }
1417
1470
  .gap-8 {
1418
1471
  gap: 2rem;
1419
1472
  }
@@ -1437,6 +1490,11 @@ video {
1437
1490
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1438
1491
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1439
1492
  }
1493
+ .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1494
+ --tw-space-x-reverse: 0;
1495
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1496
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1497
+ }
1440
1498
  .space-x-4 > :not([hidden]) ~ :not([hidden]) {
1441
1499
  --tw-space-x-reverse: 0;
1442
1500
  margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1676,10 +1734,6 @@ video {
1676
1734
  --tw-border-opacity: 1;
1677
1735
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
1678
1736
  }
1679
- .border-gray-400 {
1680
- --tw-border-opacity: 1;
1681
- border-color: rgb(156 163 175 / var(--tw-border-opacity));
1682
- }
1683
1737
  .border-gray-600 {
1684
1738
  --tw-border-opacity: 1;
1685
1739
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1710,10 +1764,6 @@ video {
1710
1764
  .border-b-buttonPrimary-500 {
1711
1765
  border-bottom-color: var(--button-primary-500);
1712
1766
  }
1713
- .border-t-white {
1714
- --tw-border-opacity: 1;
1715
- border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
1716
- }
1717
1767
  .bg-black {
1718
1768
  --tw-bg-opacity: 1;
1719
1769
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1985,6 +2035,10 @@ video {
1985
2035
  padding-top: 0.75rem;
1986
2036
  padding-bottom: 0.75rem;
1987
2037
  }
2038
+ .py-4 {
2039
+ padding-top: 1rem;
2040
+ padding-bottom: 1rem;
2041
+ }
1988
2042
  .py-5 {
1989
2043
  padding-top: 1.25rem;
1990
2044
  padding-bottom: 1.25rem;
@@ -2078,6 +2132,9 @@ video {
2078
2132
  .text-\[0\.75rem\] {
2079
2133
  font-size: 0.75rem;
2080
2134
  }
2135
+ .text-\[0\.875rem\] {
2136
+ font-size: 0.875rem;
2137
+ }
2081
2138
  .text-\[10px\] {
2082
2139
  font-size: 10px;
2083
2140
  }
@@ -2159,6 +2216,10 @@ video {
2159
2216
  --tw-text-opacity: 1;
2160
2217
  color: rgb(0 0 0 / var(--tw-text-opacity));
2161
2218
  }
2219
+ .text-blue-500 {
2220
+ --tw-text-opacity: 1;
2221
+ color: rgb(59 130 246 / var(--tw-text-opacity));
2222
+ }
2162
2223
  .text-blue-600 {
2163
2224
  --tw-text-opacity: 1;
2164
2225
  color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2216,6 +2277,18 @@ video {
2216
2277
  .text-muted-foreground {
2217
2278
  color: hsl(var(--muted-foreground));
2218
2279
  }
2280
+ .text-neutral-400 {
2281
+ --tw-text-opacity: 1;
2282
+ color: rgb(163 163 163 / var(--tw-text-opacity));
2283
+ }
2284
+ .text-neutral-500 {
2285
+ --tw-text-opacity: 1;
2286
+ color: rgb(115 115 115 / var(--tw-text-opacity));
2287
+ }
2288
+ .text-neutral-700 {
2289
+ --tw-text-opacity: 1;
2290
+ color: rgb(64 64 64 / var(--tw-text-opacity));
2291
+ }
2219
2292
  .text-neutral-900 {
2220
2293
  --tw-text-opacity: 1;
2221
2294
  color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -2371,12 +2444,68 @@ video {
2371
2444
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2372
2445
  transition-duration: 150ms;
2373
2446
  }
2447
+ .delay-100 {
2448
+ transition-delay: 100ms;
2449
+ }
2450
+ .delay-200 {
2451
+ transition-delay: 200ms;
2452
+ }
2453
+ .delay-300 {
2454
+ transition-delay: 300ms;
2455
+ }
2456
+ .duration-1000 {
2457
+ transition-duration: 1000ms;
2458
+ }
2374
2459
  .duration-300 {
2375
2460
  transition-duration: 300ms;
2376
2461
  }
2377
2462
  .will-change-\[opacity\2c transform\] {
2378
2463
  will-change: opacity,transform;
2379
2464
  }
2465
+ @keyframes enter {
2466
+
2467
+ from {
2468
+ opacity: var(--tw-enter-opacity, 1);
2469
+ transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
2470
+ }
2471
+ }
2472
+ @keyframes exit {
2473
+
2474
+ to {
2475
+ opacity: var(--tw-exit-opacity, 1);
2476
+ transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
2477
+ }
2478
+ }
2479
+ .animate-in {
2480
+ animation-name: enter;
2481
+ animation-duration: 150ms;
2482
+ --tw-enter-opacity: initial;
2483
+ --tw-enter-scale: initial;
2484
+ --tw-enter-rotate: initial;
2485
+ --tw-enter-translate-x: initial;
2486
+ --tw-enter-translate-y: initial;
2487
+ }
2488
+ .fade-in {
2489
+ --tw-enter-opacity: 0;
2490
+ }
2491
+ .duration-1000 {
2492
+ animation-duration: 1000ms;
2493
+ }
2494
+ .duration-300 {
2495
+ animation-duration: 300ms;
2496
+ }
2497
+ .delay-100 {
2498
+ animation-delay: 100ms;
2499
+ }
2500
+ .delay-200 {
2501
+ animation-delay: 200ms;
2502
+ }
2503
+ .delay-300 {
2504
+ animation-delay: 300ms;
2505
+ }
2506
+ .repeat-infinite {
2507
+ animation-iteration-count: infinite;
2508
+ }
2380
2509
  /* Chrome, Safari and Opera */
2381
2510
  .no-scrollbar::-webkit-scrollbar {
2382
2511
  display: none;
@@ -2667,6 +2796,10 @@ body {
2667
2796
  --tw-blur: blur(16px);
2668
2797
  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);
2669
2798
  }
2799
+ .peer:checked ~ .peer-checked\:border-blue-500 {
2800
+ --tw-border-opacity: 1;
2801
+ border-color: rgb(59 130 246 / var(--tw-border-opacity));
2802
+ }
2670
2803
  .peer:checked ~ .peer-checked\:border-blue-600 {
2671
2804
  --tw-border-opacity: 1;
2672
2805
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
@@ -3043,11 +3176,30 @@ body {
3043
3176
  }
3044
3177
  @media (min-width: 640px) {
3045
3178
 
3179
+ .sm\:columns-2 {
3180
+ -moz-columns: 2;
3181
+ columns: 2;
3182
+ }
3183
+
3184
+ .sm\:gap-8 {
3185
+ gap: 2rem;
3186
+ }
3187
+
3188
+ .sm\:text-2xl {
3189
+ font-size: 1.5rem;
3190
+ line-height: 2rem;
3191
+ }
3192
+
3046
3193
  .sm\:text-base {
3047
3194
  font-size: 1rem;
3048
3195
  line-height: 1.5rem;
3049
3196
  }
3050
3197
 
3198
+ .sm\:text-xl {
3199
+ font-size: 1.25rem;
3200
+ line-height: 1.75rem;
3201
+ }
3202
+
3051
3203
  .sm\:after\:inline-block::after {
3052
3204
  content: var(--tw-content);
3053
3205
  display: inline-block;
@@ -3104,6 +3256,11 @@ body {
3104
3256
  max-width: 36rem;
3105
3257
  }
3106
3258
 
3259
+ .md\:columns-3 {
3260
+ -moz-columns: 3;
3261
+ columns: 3;
3262
+ }
3263
+
3107
3264
  .md\:flex-row {
3108
3265
  flex-direction: row;
3109
3266
  }
@@ -3154,6 +3311,11 @@ body {
3154
3311
  .lg\:max-w-7xl {
3155
3312
  max-width: 80rem;
3156
3313
  }
3314
+
3315
+ .lg\:columns-4 {
3316
+ -moz-columns: 4;
3317
+ columns: 4;
3318
+ }
3157
3319
  }
3158
3320
  @media (min-width: 1280px) {
3159
3321
 
@@ -3163,3 +3325,12 @@ body {
3163
3325
  margin-right: 2.5rem;
3164
3326
  }
3165
3327
  }
3328
+ .\[\&\>\*\:not\(\:first-child\)\]\:mt-8>*:not(:first-child) {
3329
+ margin-top: 2rem;
3330
+ }
3331
+ .peer:checked ~ .peer-checked\:\[\&_\.active\]\:block .active {
3332
+ display: block;
3333
+ }
3334
+ .peer:checked ~ .peer-checked\:\[\&_\.default\]\:hidden .default {
3335
+ display: none;
3336
+ }
@@ -0,0 +1,47 @@
1
+ import { FC } from "react";
2
+ type HorizontalPricingTypes = {
3
+ plans: [
4
+ {
5
+ direction: "rtl" | "ltr";
6
+ features: [{
7
+ included: boolean;
8
+ text: string;
9
+ }];
10
+ price: number;
11
+ texts: {
12
+ title: string;
13
+ subtitle: string;
14
+ buttonText: string;
15
+ cycleText: string;
16
+ currencyText: string;
17
+ };
18
+ size: "small" | "medium" | "large";
19
+ }
20
+ ];
21
+ currencies: [
22
+ {
23
+ label: string;
24
+ value: string;
25
+ }
26
+ ];
27
+ billingCycles: [
28
+ {
29
+ label: string;
30
+ value: string;
31
+ }
32
+ ];
33
+ onPlanClicked?: (e: any) => void;
34
+ currentCycle: {
35
+ label: string;
36
+ value: string;
37
+ };
38
+ currentCurrency: {
39
+ label: string;
40
+ value: string;
41
+ };
42
+ onCycleChange?: (e: any) => void;
43
+ onCurrencyChange?: (e: any) => void;
44
+ direction?: "rtl" | "ltr";
45
+ };
46
+ export declare const HorizontalPricing: FC<HorizontalPricingTypes>;
47
+ export {};
@@ -1,2 +1,3 @@
1
1
  export * from "./PricingPlans";
2
2
  export * from "./ComparingPlans";
3
+ export * from "./HorizontalPricing";
@@ -12,6 +12,7 @@ type LandingCardTypes = {
12
12
  linkText?: string;
13
13
  };
14
14
  buttonLink?: string;
15
+ className?: any;
15
16
  };
16
17
  export declare const HawaLandingCard: FC<LandingCardTypes>;
17
18
  export {};
@@ -0,0 +1,8 @@
1
+ import { FC } from "react";
2
+ type LoadingTypes = {
3
+ size?: "button" | "sm" | "normal" | "lg" | "xl";
4
+ design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
5
+ color?: any;
6
+ };
7
+ export declare const HawaLoading: FC<LoadingTypes>;
8
+ export {};
@@ -2,16 +2,13 @@ import { FC } from "react";
2
2
  type RadioTypes = {
3
3
  orientation?: "vertical" | "horizontal";
4
4
  design?: "default" | "tabs" | "cards" | "bordered";
5
- options?: [
6
- {
7
- value: any;
8
- label: any;
9
- disabled?: any;
10
- sublabel?: any;
11
- beforeIcon?: any;
12
- afterIcon?: any;
13
- }
14
- ];
5
+ options?: {
6
+ value: any;
7
+ label: any;
8
+ disabled?: any;
9
+ sublabel?: any;
10
+ icon?: any;
11
+ }[];
15
12
  onChangeTab?: any;
16
13
  defaultValue?: any;
17
14
  };
@@ -23,7 +23,7 @@ export * from "./HawaCopyrights";
23
23
  export * from "./HawaStepper";
24
24
  export * from "./HawaStats";
25
25
  export * from "./HawaCodeBlock";
26
- export * from "./HawaSpinner";
26
+ export * from "./HawaLoading";
27
27
  export * from "./HawaRadio";
28
28
  export * from "./HawaDatepicker";
29
29
  export * from "./DragDropImages";