@sikka/hawa 0.27.6-next → 0.27.8-next

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 (72) hide show
  1. package/dist/blocks/auth/index.js +7 -2
  2. package/dist/blocks/auth/index.mjs +4 -4
  3. package/dist/blocks/feedback/index.js +7 -2
  4. package/dist/blocks/feedback/index.mjs +5 -5
  5. package/dist/blocks/index.js +7 -2
  6. package/dist/blocks/index.mjs +2 -2
  7. package/dist/blocks/misc/index.js +7 -2
  8. package/dist/blocks/misc/index.mjs +5 -5
  9. package/dist/blocks/pricing/index.js +7 -2
  10. package/dist/blocks/pricing/index.mjs +4 -4
  11. package/dist/{chunk-F4MGQ5JV.mjs → chunk-3LS2PYA7.mjs} +1 -1
  12. package/dist/{chunk-HMQOYBTW.mjs → chunk-CLYUW7ZZ.mjs} +1 -1
  13. package/dist/{chunk-AQO6QVMV.mjs → chunk-FFXJHDRG.mjs} +1 -1
  14. package/dist/{chunk-I5EJUQ4E.mjs → chunk-HHH4PVTF.mjs} +7 -2
  15. package/dist/{chunk-MNCROATO.mjs → chunk-HLKZUHZF.mjs} +1 -1
  16. package/dist/{chunk-7YVLGY5B.mjs → chunk-LBJ3MGP5.mjs} +1 -1
  17. package/dist/{chunk-CVOMACRL.mjs → chunk-LT2GWHD3.mjs} +1 -1
  18. package/dist/{chunk-ABI2Q4UV.mjs → chunk-RLSD5FPT.mjs} +1 -1
  19. package/dist/{chunk-KZ72VALG.mjs → chunk-SYU5MD4T.mjs} +1 -1
  20. package/dist/{chunk-GCRMEJAI.mjs → chunk-XP77ULQK.mjs} +7 -2
  21. package/dist/colorPicker/index.js +7 -2
  22. package/dist/colorPicker/index.js.map +1 -1
  23. package/dist/colorPicker/index.mjs +7 -2
  24. package/dist/colorPicker/index.mjs.map +1 -1
  25. package/dist/combobox/index.js +7 -2
  26. package/dist/combobox/index.js.map +1 -1
  27. package/dist/combobox/index.mjs +7 -2
  28. package/dist/combobox/index.mjs.map +1 -1
  29. package/dist/dataTable/index.js +7 -2
  30. package/dist/dataTable/index.js.map +1 -1
  31. package/dist/dataTable/index.mjs +7 -2
  32. package/dist/dataTable/index.mjs.map +1 -1
  33. package/dist/elements/index.js +7 -2
  34. package/dist/elements/index.mjs +3 -3
  35. package/dist/index.css +16 -4
  36. package/dist/index.js +7 -2
  37. package/dist/index.mjs +7 -2
  38. package/dist/input/index.js +7 -2
  39. package/dist/input/index.js.map +1 -1
  40. package/dist/input/index.mjs +7 -2
  41. package/dist/input/index.mjs.map +1 -1
  42. package/dist/layout/index.js +7 -2
  43. package/dist/layout/index.mjs +2 -2
  44. package/dist/passwordInput/index.js +7 -2
  45. package/dist/passwordInput/index.js.map +1 -1
  46. package/dist/passwordInput/index.mjs +7 -2
  47. package/dist/passwordInput/index.mjs.map +1 -1
  48. package/dist/phoneInput/index.js +7 -2
  49. package/dist/phoneInput/index.js.map +1 -1
  50. package/dist/phoneInput/index.mjs +7 -2
  51. package/dist/phoneInput/index.mjs.map +1 -1
  52. package/dist/select/index.js +7 -2
  53. package/dist/select/index.js.map +1 -1
  54. package/dist/select/index.mjs +7 -2
  55. package/dist/select/index.mjs.map +1 -1
  56. package/dist/simpleTable/index.js +7 -2
  57. package/dist/simpleTable/index.js.map +1 -1
  58. package/dist/simpleTable/index.mjs +7 -2
  59. package/dist/simpleTable/index.mjs.map +1 -1
  60. package/dist/skeleton/index.js +7 -2
  61. package/dist/skeleton/index.js.map +1 -1
  62. package/dist/skeleton/index.mjs +7 -2
  63. package/dist/skeleton/index.mjs.map +1 -1
  64. package/dist/stats/index.js +7 -2
  65. package/dist/stats/index.js.map +1 -1
  66. package/dist/stats/index.mjs +7 -2
  67. package/dist/stats/index.mjs.map +1 -1
  68. package/dist/textarea/index.js +7 -2
  69. package/dist/textarea/index.js.map +1 -1
  70. package/dist/textarea/index.mjs +7 -2
  71. package/dist/textarea/index.mjs.map +1 -1
  72. package/package.json +1 -1
package/dist/blocks/auth/index.js CHANGED
@@ -699,14 +699,19 @@ function Skeleton({
699
699
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
700
700
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
701
701
  };
702
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
702
+ const fadeStyle = {
703
+ bottom: "hawa-mask-fade-bottom",
704
+ top: "hawa-mask-fade-top",
705
+ right: "hawa-mask-fade-right",
706
+ left: "hawa-mask-fade-left "
707
+ };
703
708
  return /* @__PURE__ */ import_react4.default.createElement(
704
709
  "div",
705
710
  {
706
711
  className: cn(
707
712
  animationStyles[animation],
708
713
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
709
- fade && fadeStyle,
714
+ fade && fadeStyle[fade],
710
715
  className
711
716
  ),
712
717
  ...props
package/dist/blocks/auth/index.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  import {
2
2
  Input
3
- } from "../../chunk-AQO6QVMV.mjs";
3
+ } from "../../chunk-FFXJHDRG.mjs";
4
4
  import {
5
5
  StopPropagationWrapper
6
6
  } from "../../chunk-ZS3FB3PO.mjs";
7
7
  import {
8
8
  Select
9
- } from "../../chunk-KZ72VALG.mjs";
9
+ } from "../../chunk-SYU5MD4T.mjs";
10
10
  import {
11
11
  EyeIcon,
12
12
  HiddenEyeIcon
13
- } from "../../chunk-F4MGQ5JV.mjs";
13
+ } from "../../chunk-3LS2PYA7.mjs";
14
14
  import {
15
15
  Button,
16
16
  Card,
@@ -22,7 +22,7 @@ import {
22
22
  Label,
23
23
  Loading,
24
24
  cn
25
- } from "../../chunk-GCRMEJAI.mjs";
25
+ } from "../../chunk-XP77ULQK.mjs";
26
26
 
27
27
  // blocks/auth/LoginForm.tsx
28
28
  import React5, { useState as useState3 } from "react";
package/dist/blocks/feedback/index.js CHANGED
@@ -743,14 +743,19 @@ function Skeleton({
743
743
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
744
744
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
745
745
  };
746
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
746
+ const fadeStyle = {
747
+ bottom: "hawa-mask-fade-bottom",
748
+ top: "hawa-mask-fade-top",
749
+ right: "hawa-mask-fade-right",
750
+ left: "hawa-mask-fade-left "
751
+ };
747
752
  return /* @__PURE__ */ import_react4.default.createElement(
748
753
  "div",
749
754
  {
750
755
  className: cn(
751
756
  animationStyles[animation],
752
757
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
753
- fade && fadeStyle,
758
+ fade && fadeStyle[fade],
754
759
  className
755
760
  ),
756
761
  ...props
package/dist/blocks/feedback/index.mjs CHANGED
@@ -1,25 +1,25 @@
1
1
  import {
2
2
  Textarea
3
- } from "../../chunk-HMQOYBTW.mjs";
3
+ } from "../../chunk-CLYUW7ZZ.mjs";
4
4
  import {
5
5
  Select
6
- } from "../../chunk-KZ72VALG.mjs";
6
+ } from "../../chunk-SYU5MD4T.mjs";
7
7
  import {
8
8
  Radio
9
- } from "../../chunk-7YVLGY5B.mjs";
9
+ } from "../../chunk-LBJ3MGP5.mjs";
10
10
  import {
11
11
  BadEmoji,
12
12
  GoodEmoji,
13
13
  VeryBadEmoji,
14
14
  VeryGoodEmoji
15
- } from "../../chunk-F4MGQ5JV.mjs";
15
+ } from "../../chunk-3LS2PYA7.mjs";
16
16
  import {
17
17
  Button,
18
18
  Card,
19
19
  CardContent,
20
20
  Label,
21
21
  cn
22
- } from "../../chunk-GCRMEJAI.mjs";
22
+ } from "../../chunk-XP77ULQK.mjs";
23
23
 
24
24
  // blocks/feedback/UserReferralSource.tsx
25
25
  import React, { useRef, useState } from "react";
package/dist/blocks/index.js CHANGED
@@ -720,14 +720,19 @@ function Skeleton({
720
720
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
721
721
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
722
722
  };
723
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
723
+ const fadeStyle = {
724
+ bottom: "hawa-mask-fade-bottom",
725
+ top: "hawa-mask-fade-top",
726
+ right: "hawa-mask-fade-right",
727
+ left: "hawa-mask-fade-left "
728
+ };
724
729
  return /* @__PURE__ */ import_react4.default.createElement(
725
730
  "div",
726
731
  {
727
732
  className: cn(
728
733
  animationStyles[animation],
729
734
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
730
- fade && fadeStyle,
735
+ fade && fadeStyle[fade],
731
736
  className
732
737
  ),
733
738
  ...props
package/dist/blocks/index.mjs CHANGED
@@ -25,7 +25,7 @@ import {
25
25
  UncheckMark,
26
26
  VeryBadEmoji,
27
27
  VeryGoodEmoji
28
- } from "../chunk-CVOMACRL.mjs";
28
+ } from "../chunk-LT2GWHD3.mjs";
29
29
  import {
30
30
  Button,
31
31
  Card,
@@ -41,7 +41,7 @@ import {
41
41
  Skeleton,
42
42
  Tooltip,
43
43
  cn
44
- } from "../chunk-I5EJUQ4E.mjs";
44
+ } from "../chunk-HHH4PVTF.mjs";
45
45
  import "../chunk-ZFXKCRJC.mjs";
46
46
 
47
47
  // blocks/auth/LoginForm.tsx
package/dist/blocks/misc/index.js CHANGED
@@ -808,14 +808,19 @@ function Skeleton({
808
808
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
809
809
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
810
810
  };
811
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
811
+ const fadeStyle = {
812
+ bottom: "hawa-mask-fade-bottom",
813
+ top: "hawa-mask-fade-top",
814
+ right: "hawa-mask-fade-right",
815
+ left: "hawa-mask-fade-left "
816
+ };
812
817
  return /* @__PURE__ */ import_react7.default.createElement(
813
818
  "div",
814
819
  {
815
820
  className: cn(
816
821
  animationStyles[animation],
817
822
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
818
- fade && fadeStyle,
823
+ fade && fadeStyle[fade],
819
824
  className
820
825
  ),
821
826
  ...props
package/dist/blocks/misc/index.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  import {
2
2
  Input
3
- } from "../../chunk-AQO6QVMV.mjs";
3
+ } from "../../chunk-FFXJHDRG.mjs";
4
4
  import {
5
5
  Chip,
6
6
  ScrollArea
7
- } from "../../chunk-MNCROATO.mjs";
7
+ } from "../../chunk-HLKZUHZF.mjs";
8
8
  import {
9
9
  Textarea
10
- } from "../../chunk-HMQOYBTW.mjs";
10
+ } from "../../chunk-CLYUW7ZZ.mjs";
11
11
  import {
12
12
  Select
13
- } from "../../chunk-KZ72VALG.mjs";
13
+ } from "../../chunk-SYU5MD4T.mjs";
14
14
  import {
15
15
  Button,
16
16
  Card,
@@ -20,7 +20,7 @@ import {
20
20
  CardHeader,
21
21
  CardTitle,
22
22
  cn
23
- } from "../../chunk-GCRMEJAI.mjs";
23
+ } from "../../chunk-XP77ULQK.mjs";
24
24
 
25
25
  // blocks/misc/LegalTexts.tsx
26
26
  import React2 from "react";
package/dist/blocks/pricing/index.js CHANGED
@@ -462,14 +462,19 @@ function Skeleton({
462
462
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
463
463
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
464
464
  };
465
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
465
+ const fadeStyle = {
466
+ bottom: "hawa-mask-fade-bottom",
467
+ top: "hawa-mask-fade-top",
468
+ right: "hawa-mask-fade-right",
469
+ left: "hawa-mask-fade-left "
470
+ };
466
471
  return /* @__PURE__ */ import_react4.default.createElement(
467
472
  "div",
468
473
  {
469
474
  className: cn(
470
475
  animationStyles[animation],
471
476
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
472
- fade && fadeStyle,
477
+ fade && fadeStyle[fade],
473
478
  className
474
479
  ),
475
480
  ...props
package/dist/blocks/pricing/index.mjs CHANGED
@@ -1,22 +1,22 @@
1
1
  import {
2
2
  Chip,
3
3
  ScrollArea
4
- } from "../../chunk-MNCROATO.mjs";
4
+ } from "../../chunk-HLKZUHZF.mjs";
5
5
  import "../../chunk-ZS3FB3PO.mjs";
6
6
  import {
7
7
  Radio
8
- } from "../../chunk-7YVLGY5B.mjs";
8
+ } from "../../chunk-LBJ3MGP5.mjs";
9
9
  import {
10
10
  CheckMark,
11
11
  UncheckMark
12
- } from "../../chunk-F4MGQ5JV.mjs";
12
+ } from "../../chunk-3LS2PYA7.mjs";
13
13
  import {
14
14
  Button,
15
15
  Card,
16
16
  Skeleton,
17
17
  Tooltip,
18
18
  cn
19
- } from "../../chunk-GCRMEJAI.mjs";
19
+ } from "../../chunk-XP77ULQK.mjs";
20
20
 
21
21
  // blocks/pricing/PricingPlans.tsx
22
22
  import React8 from "react";
package/dist/{chunk-F4MGQ5JV.mjs → chunk-3LS2PYA7.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  cn
3
- } from "./chunk-GCRMEJAI.mjs";
3
+ } from "./chunk-XP77ULQK.mjs";
4
4
 
5
5
  // icons/Emojis.tsx
6
6
  import React from "react";
package/dist/{chunk-HMQOYBTW.mjs → chunk-CLYUW7ZZ.mjs} RENAMED
@@ -2,7 +2,7 @@ import {
2
2
  Label,
3
3
  Skeleton,
4
4
  cn
5
- } from "./chunk-GCRMEJAI.mjs";
5
+ } from "./chunk-XP77ULQK.mjs";
6
6
 
7
7
  // elements/textarea/Textarea.tsx
8
8
  import * as React from "react";
package/dist/{chunk-AQO6QVMV.mjs → chunk-FFXJHDRG.mjs} RENAMED
@@ -2,7 +2,7 @@ import {
2
2
  Label,
3
3
  Skeleton,
4
4
  cn
5
- } from "./chunk-GCRMEJAI.mjs";
5
+ } from "./chunk-XP77ULQK.mjs";
6
6
 
7
7
  // elements/input/Input.tsx
8
8
  import React, { forwardRef } from "react";
package/dist/{chunk-I5EJUQ4E.mjs → chunk-HHH4PVTF.mjs} RENAMED
@@ -478,14 +478,19 @@ function Skeleton({
478
478
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
479
479
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
480
480
  };
481
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
481
+ const fadeStyle = {
482
+ bottom: "hawa-mask-fade-bottom",
483
+ top: "hawa-mask-fade-top",
484
+ right: "hawa-mask-fade-right",
485
+ left: "hawa-mask-fade-left "
486
+ };
482
487
  return /* @__PURE__ */ React5.createElement(
483
488
  "div",
484
489
  {
485
490
  className: cn(
486
491
  animationStyles[animation],
487
492
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
488
- fade && fadeStyle,
493
+ fade && fadeStyle[fade],
489
494
  className
490
495
  ),
491
496
  ...props
package/dist/{chunk-MNCROATO.mjs → chunk-HLKZUHZF.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  cn
3
- } from "./chunk-GCRMEJAI.mjs";
3
+ } from "./chunk-XP77ULQK.mjs";
4
4
 
5
5
  // elements/scrollArea/ScrollArea.tsx
6
6
  import * as React from "react";
package/dist/{chunk-7YVLGY5B.mjs → chunk-LBJ3MGP5.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Label,
3
3
  cn
4
- } from "./chunk-GCRMEJAI.mjs";
4
+ } from "./chunk-XP77ULQK.mjs";
5
5
 
6
6
  // elements/radio/Radio.tsx
7
7
  import React, { useState, useRef, useEffect } from "react";
package/dist/{chunk-CVOMACRL.mjs → chunk-LT2GWHD3.mjs} RENAMED
@@ -4,7 +4,7 @@ import {
4
4
  Skeleton,
5
5
  Tooltip,
6
6
  cn
7
- } from "./chunk-I5EJUQ4E.mjs";
7
+ } from "./chunk-HHH4PVTF.mjs";
8
8
 
9
9
  // elements/alert/Alert.tsx
10
10
  import React, { useRef, useState, useEffect } from "react";
package/dist/{chunk-ABI2Q4UV.mjs → chunk-RLSD5FPT.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  cn
3
- } from "./chunk-I5EJUQ4E.mjs";
3
+ } from "./chunk-HHH4PVTF.mjs";
4
4
 
5
5
  // elements/sheet/Sheet.tsx
6
6
  import * as React from "react";
package/dist/{chunk-KZ72VALG.mjs → chunk-SYU5MD4T.mjs} RENAMED
@@ -2,7 +2,7 @@ import {
2
2
  Label,
3
3
  Skeleton,
4
4
  cn
5
- } from "./chunk-GCRMEJAI.mjs";
5
+ } from "./chunk-XP77ULQK.mjs";
6
6
 
7
7
  // elements/select/Select.tsx
8
8
  import React from "react";
package/dist/{chunk-GCRMEJAI.mjs → chunk-XP77ULQK.mjs} RENAMED
@@ -502,14 +502,19 @@ function Skeleton({
502
502
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
503
503
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
504
504
  };
505
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
505
+ const fadeStyle = {
506
+ bottom: "hawa-mask-fade-bottom",
507
+ top: "hawa-mask-fade-top",
508
+ right: "hawa-mask-fade-right",
509
+ left: "hawa-mask-fade-left "
510
+ };
506
511
  return /* @__PURE__ */ React6.createElement(
507
512
  "div",
508
513
  {
509
514
  className: cn(
510
515
  animationStyles[animation],
511
516
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
512
- fade && fadeStyle,
517
+ fade && fadeStyle[fade],
513
518
  className
514
519
  ),
515
520
  ...props
package/dist/colorPicker/index.js CHANGED
@@ -77,14 +77,19 @@ function Skeleton({
77
77
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
78
78
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
79
79
  };
80
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
80
+ const fadeStyle = {
81
+ bottom: "hawa-mask-fade-bottom",
82
+ top: "hawa-mask-fade-top",
83
+ right: "hawa-mask-fade-right",
84
+ left: "hawa-mask-fade-left "
85
+ };
81
86
  return /* @__PURE__ */ import_react.default.createElement(
82
87
  "div",
83
88
  {
84
89
  className: cn(
85
90
  animationStyles[animation],
86
91
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
87
- fade && fadeStyle,
92
+ fade && fadeStyle[fade],
88
93
  className
89
94
  ),
90
95
  ...props
package/dist/colorPicker/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../elements/colorPicker/index.ts","../../elements/colorPicker/ColorPicker.tsx","../../util/index.ts","../../elements/skeleton/Skeleton.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./ColorPicker\";","import React, {\n useState,\n FC,\n ChangeEvent,\n InputHTMLAttributes,\n useEffect,\n FormEvent\n} from \"react\";\n\nimport { calculateLuminance, cn, getTextColor } from \"@util/index\";\n\nimport { Skeleton } from \"@elements/skeleton\";\n\nimport { Label, LabelProps } from \"../label\";\n\ntype ColorPickerTypes = {\n label?: string;\n id?: string;\n isLoading?: boolean;\n labelProps?: LabelProps;\n helperText?: string;\n forceHideHelperText?: boolean;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n /** The hex code for the color */\n color?: any;\n /** Fires everytime the color changes */\n handleChange?: (\n e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>\n ) => void;\n colorPickerClassNames?: string;\n colorTextClassNames?: string;\n colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;\n textInputProps?: InputHTMLAttributes<HTMLInputElement>;\n containerProps?: InputHTMLAttributes<HTMLDivElement>;\n};\n\nexport const ColorPicker: FC<ColorPickerTypes> = ({\n containerProps,\n colorPickerProps,\n textInputProps,\n labelProps,\n forceHideHelperText,\n isLoading,\n preview = false,\n ...props\n}) => {\n const [selectedColor, setSelectedColor] = useState(props.color);\n\n useEffect(() => {\n if (selectedColor && selectedColor[0] !== \"#\") {\n setSelectedColor(`#${selectedColor}`);\n }\n }, [selectedColor]);\n\n const handleTextInputChange = (e: FormEvent<HTMLInputElement>) => {\n const inputElement = e.target as HTMLInputElement;\n let inputColor = inputElement.value;\n\n if (inputColor[0] !== \"#\") {\n // Prepend a hash (#) to the input value\n inputColor = `#${inputColor}`;\n // inputElement.value = inputColor;\n }\n // Remove any non-alphanumeric characters except the hash (#)\n const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, \"\");\n\n setSelectedColor(sanitizedInput);\n\n if (props.handleChange) {\n props.handleChange(e); // Pass the original event\n }\n };\n\n return (\n <div className=\"hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {isLoading ? (\n <Skeleton style={{ height: 40, width: 148 }} />\n ) : (\n <div dir=\"ltr\" className=\"hawa-flex hawa-w-full hawa-flex-row\">\n <div\n style={{ height: 40, backgroundColor: selectedColor }}\n className=\"hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border\"\n >\n <input\n disabled={preview}\n type=\"color\"\n value={selectedColor}\n onChange={(e) => {\n setSelectedColor(e.target.value);\n if (props.handleChange) {\n props.handleChange(e);\n }\n }}\n className={cn(\n \"hawa-mt-0 hawa-h-[38px] hawa-opacity-0\",\n props.colorPickerClassNames\n )}\n {...colorPickerProps}\n />\n </div>\n <div className=\"hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0\">\n <input\n disabled={preview}\n maxLength={7}\n type=\"text\"\n onInput={handleTextInputChange}\n value={selectedColor}\n className={cn(\n \"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all\",\n \"hawa-border hawa-border-l-0 hawa-border-l-transparent\"\n // \"hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none\"\n )}\n style={{\n backgroundColor: preview\n ? selectedColor\n : \"hsl(var(--background))\",\n color: preview\n ? calculateLuminance(selectedColor) > 0.5\n ? \"black\"\n : \"white\"\n : \"\"\n }}\n // 0.179\n {...textInputProps}\n />\n </div>\n </div>\n )}\n\n {!forceHideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;\n\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n fade && fadeStyle,\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["import_react","React","React","import_react","React","React"]}
1
+ {"version":3,"sources":["../../elements/colorPicker/index.ts","../../elements/colorPicker/ColorPicker.tsx","../../util/index.ts","../../elements/skeleton/Skeleton.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./ColorPicker\";","import React, {\n useState,\n FC,\n ChangeEvent,\n InputHTMLAttributes,\n useEffect,\n FormEvent\n} from \"react\";\n\nimport { calculateLuminance, cn, getTextColor } from \"@util/index\";\n\nimport { Skeleton } from \"@elements/skeleton\";\n\nimport { Label, LabelProps } from \"../label\";\n\ntype ColorPickerTypes = {\n label?: string;\n id?: string;\n isLoading?: boolean;\n labelProps?: LabelProps;\n helperText?: string;\n forceHideHelperText?: boolean;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n /** The hex code for the color */\n color?: any;\n /** Fires everytime the color changes */\n handleChange?: (\n e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>\n ) => void;\n colorPickerClassNames?: string;\n colorTextClassNames?: string;\n colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;\n textInputProps?: InputHTMLAttributes<HTMLInputElement>;\n containerProps?: InputHTMLAttributes<HTMLDivElement>;\n};\n\nexport const ColorPicker: FC<ColorPickerTypes> = ({\n containerProps,\n colorPickerProps,\n textInputProps,\n labelProps,\n forceHideHelperText,\n isLoading,\n preview = false,\n ...props\n}) => {\n const [selectedColor, setSelectedColor] = useState(props.color);\n\n useEffect(() => {\n if (selectedColor && selectedColor[0] !== \"#\") {\n setSelectedColor(`#${selectedColor}`);\n }\n }, [selectedColor]);\n\n const handleTextInputChange = (e: FormEvent<HTMLInputElement>) => {\n const inputElement = e.target as HTMLInputElement;\n let inputColor = inputElement.value;\n\n if (inputColor[0] !== \"#\") {\n // Prepend a hash (#) to the input value\n inputColor = `#${inputColor}`;\n // inputElement.value = inputColor;\n }\n // Remove any non-alphanumeric characters except the hash (#)\n const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, \"\");\n\n setSelectedColor(sanitizedInput);\n\n if (props.handleChange) {\n props.handleChange(e); // Pass the original event\n }\n };\n\n return (\n <div className=\"hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {isLoading ? (\n <Skeleton style={{ height: 40, width: 148 }} />\n ) : (\n <div dir=\"ltr\" className=\"hawa-flex hawa-w-full hawa-flex-row\">\n <div\n style={{ height: 40, backgroundColor: selectedColor }}\n className=\"hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border\"\n >\n <input\n disabled={preview}\n type=\"color\"\n value={selectedColor}\n onChange={(e) => {\n setSelectedColor(e.target.value);\n if (props.handleChange) {\n props.handleChange(e);\n }\n }}\n className={cn(\n \"hawa-mt-0 hawa-h-[38px] hawa-opacity-0\",\n props.colorPickerClassNames\n )}\n {...colorPickerProps}\n />\n </div>\n <div className=\"hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0\">\n <input\n disabled={preview}\n maxLength={7}\n type=\"text\"\n onInput={handleTextInputChange}\n value={selectedColor}\n className={cn(\n \"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all\",\n \"hawa-border hawa-border-l-0 hawa-border-l-transparent\"\n // \"hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none\"\n )}\n style={{\n backgroundColor: preview\n ? selectedColor\n : \"hsl(var(--background))\",\n color: preview\n ? calculateLuminance(selectedColor) > 0.5\n ? \"black\"\n : \"white\"\n : \"\"\n }}\n // 0.179\n {...textInputProps}\n />\n </div>\n </div>\n )}\n\n {!forceHideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \"\n };\n\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n fade && fadeStyle[fade],\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["import_react","React","React","import_react","React","React"]}
package/dist/colorPicker/index.mjs CHANGED
@@ -44,14 +44,19 @@ function Skeleton({
44
44
  pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
45
45
  shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
46
46
  };
47
- const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
47
+ const fadeStyle = {
48
+ bottom: "hawa-mask-fade-bottom",
49
+ top: "hawa-mask-fade-top",
50
+ right: "hawa-mask-fade-right",
51
+ left: "hawa-mask-fade-left "
52
+ };
48
53
  return /* @__PURE__ */ React.createElement(
49
54
  "div",
50
55
  {
51
56
  className: cn(
52
57
  animationStyles[animation],
53
58
  content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
54
- fade && fadeStyle,
59
+ fade && fadeStyle[fade],
55
60
  className
56
61
  ),
57
62
  ...props