@sikka/hawa 0.17.12-next → 0.18.0-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.
- package/dist/index.css +222 -0
- package/dist/index.d.mts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +129 -37
- package/dist/index.mjs +129 -37
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -678,6 +678,228 @@ input[type="number"]::-webkit-inner-spin-button,
|
|
|
678
678
|
margin-right: 5px !important;
|
|
679
679
|
text-transform: uppercase;
|
|
680
680
|
}
|
|
681
|
+
.progress-loading {
|
|
682
|
+
position: relative;
|
|
683
|
+
display: flex;
|
|
684
|
+
align-items: center;
|
|
685
|
+
justify-content: center;
|
|
686
|
+
height: 5px;
|
|
687
|
+
width: 80px;
|
|
688
|
+
border-radius: calc(5px / 2);
|
|
689
|
+
overflow: hidden;
|
|
690
|
+
transform: translate3d(0, 0, 0);
|
|
691
|
+
}
|
|
692
|
+
.progress-loading::before {
|
|
693
|
+
content: "";
|
|
694
|
+
position: absolute;
|
|
695
|
+
top: 0;
|
|
696
|
+
left: 0;
|
|
697
|
+
height: 100%;
|
|
698
|
+
width: 100%;
|
|
699
|
+
background-color: hsl(var(--primary));
|
|
700
|
+
opacity: 0.1;
|
|
701
|
+
transition: background-color 0.3s ease;
|
|
702
|
+
}
|
|
703
|
+
.progress-loading::after {
|
|
704
|
+
content: "";
|
|
705
|
+
height: 100%;
|
|
706
|
+
width: 100%;
|
|
707
|
+
border-radius: calc(5px / 2);
|
|
708
|
+
animation: wobble 1.75s ease-in-out infinite;
|
|
709
|
+
transform: translateX(-95%);
|
|
710
|
+
background-color: hsl(var(--primary));
|
|
711
|
+
transition: background-color 0.3s ease;
|
|
712
|
+
}
|
|
713
|
+
@keyframes wobble {
|
|
714
|
+
0%,
|
|
715
|
+
100% {
|
|
716
|
+
transform: translateX(-95%);
|
|
717
|
+
}
|
|
718
|
+
50% {
|
|
719
|
+
transform: translateX(95%);
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
.squircle-container {
|
|
723
|
+
transform-origin: center;
|
|
724
|
+
will-change: transform;
|
|
725
|
+
overflow: visible;
|
|
726
|
+
}
|
|
727
|
+
.squircle-car {
|
|
728
|
+
fill: none;
|
|
729
|
+
stroke: hsl(var(--primary));
|
|
730
|
+
stroke-dasharray: 15, 85;
|
|
731
|
+
stroke-dashoffset: 0;
|
|
732
|
+
stroke-linecap: round;
|
|
733
|
+
animation: travel 0.9s linear infinite;
|
|
734
|
+
will-change: stroke-dasharray, stroke-dashoffset;
|
|
735
|
+
transition: stroke 0.5s ease;
|
|
736
|
+
}
|
|
737
|
+
.square-car {
|
|
738
|
+
fill: none;
|
|
739
|
+
stroke: hsl(var(--primary));
|
|
740
|
+
stroke-dasharray: 25, 75;
|
|
741
|
+
stroke-dashoffset: 0;
|
|
742
|
+
stroke-linecap: round;
|
|
743
|
+
animation: travel 0.9s linear infinite;
|
|
744
|
+
will-change: stroke-dasharray, stroke-dashoffset;
|
|
745
|
+
transition: stroke 0.5s ease;
|
|
746
|
+
}
|
|
747
|
+
.squircle-track {
|
|
748
|
+
fill: none;
|
|
749
|
+
stroke: hsl(var(--primary));
|
|
750
|
+
opacity: 0.1;
|
|
751
|
+
transition: stroke 0.5s ease;
|
|
752
|
+
}
|
|
753
|
+
.circle-container {
|
|
754
|
+
transform-origin: center;
|
|
755
|
+
animation: rotate 0.8s linear infinite;
|
|
756
|
+
will-change: transform;
|
|
757
|
+
overflow: visible;
|
|
758
|
+
}
|
|
759
|
+
.circle-car {
|
|
760
|
+
fill: none;
|
|
761
|
+
stroke: hsl(var(--primary));
|
|
762
|
+
stroke-dasharray: 25, 75;
|
|
763
|
+
stroke-dashoffset: 0;
|
|
764
|
+
stroke-linecap: round;
|
|
765
|
+
transition: stroke 0.5s ease;
|
|
766
|
+
}
|
|
767
|
+
.circle-track {
|
|
768
|
+
fill: none;
|
|
769
|
+
stroke: hsl(var(--primary));
|
|
770
|
+
opacity: 0.1;
|
|
771
|
+
transition: stroke 0.5s ease;
|
|
772
|
+
}
|
|
773
|
+
.orbit-container {
|
|
774
|
+
--uib-size: 35px;
|
|
775
|
+
--uib-color: black;
|
|
776
|
+
--uib-speed: 1.5s;
|
|
777
|
+
--uib-dot-size: calc(var(--uib-size) * 0.4);
|
|
778
|
+
position: relative;
|
|
779
|
+
display: flex;
|
|
780
|
+
align-items: center;
|
|
781
|
+
justify-content: center;
|
|
782
|
+
height: var(--uib-dot-size);
|
|
783
|
+
width: var(--uib-size);
|
|
784
|
+
}
|
|
785
|
+
.orbit-container::before,
|
|
786
|
+
.orbit-container::after {
|
|
787
|
+
content: "";
|
|
788
|
+
position: absolute;
|
|
789
|
+
height: var(--uib-dot-size);
|
|
790
|
+
width: var(--uib-dot-size);
|
|
791
|
+
border-radius: 50%;
|
|
792
|
+
background-color: hsl(var(--primary));
|
|
793
|
+
flex-shrink: 0;
|
|
794
|
+
transition: background-color 0.3s ease;
|
|
795
|
+
}
|
|
796
|
+
.orbit-container::before {
|
|
797
|
+
animation: orbit var(--uib-speed) linear infinite;
|
|
798
|
+
}
|
|
799
|
+
.orbit-container::after {
|
|
800
|
+
animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2)
|
|
801
|
+
infinite;
|
|
802
|
+
}
|
|
803
|
+
@keyframes orbit {
|
|
804
|
+
0% {
|
|
805
|
+
transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684);
|
|
806
|
+
opacity: 0.65;
|
|
807
|
+
}
|
|
808
|
+
5% {
|
|
809
|
+
transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.684208);
|
|
810
|
+
opacity: 0.58;
|
|
811
|
+
}
|
|
812
|
+
10% {
|
|
813
|
+
transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.631576);
|
|
814
|
+
opacity: 0.51;
|
|
815
|
+
}
|
|
816
|
+
15% {
|
|
817
|
+
transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.578944);
|
|
818
|
+
opacity: 0.44;
|
|
819
|
+
}
|
|
820
|
+
20% {
|
|
821
|
+
transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.526312);
|
|
822
|
+
opacity: 0.37;
|
|
823
|
+
}
|
|
824
|
+
25% {
|
|
825
|
+
transform: translateX(0%) scale(0.47368);
|
|
826
|
+
opacity: 0.3;
|
|
827
|
+
}
|
|
828
|
+
30% {
|
|
829
|
+
transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.526312);
|
|
830
|
+
opacity: 0.37;
|
|
831
|
+
}
|
|
832
|
+
35% {
|
|
833
|
+
transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.578944);
|
|
834
|
+
opacity: 0.44;
|
|
835
|
+
}
|
|
836
|
+
40% {
|
|
837
|
+
transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.631576);
|
|
838
|
+
opacity: 0.51;
|
|
839
|
+
}
|
|
840
|
+
45% {
|
|
841
|
+
transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.684208);
|
|
842
|
+
opacity: 0.58;
|
|
843
|
+
}
|
|
844
|
+
50% {
|
|
845
|
+
transform: translateX(calc(var(--uib-size) * -0.25)) scale(0.73684);
|
|
846
|
+
opacity: 0.65;
|
|
847
|
+
}
|
|
848
|
+
55% {
|
|
849
|
+
transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.789472);
|
|
850
|
+
opacity: 0.72;
|
|
851
|
+
}
|
|
852
|
+
60% {
|
|
853
|
+
transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.842104);
|
|
854
|
+
opacity: 0.79;
|
|
855
|
+
}
|
|
856
|
+
65% {
|
|
857
|
+
transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.894736);
|
|
858
|
+
opacity: 0.86;
|
|
859
|
+
}
|
|
860
|
+
70% {
|
|
861
|
+
transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.947368);
|
|
862
|
+
opacity: 0.93;
|
|
863
|
+
}
|
|
864
|
+
75% {
|
|
865
|
+
transform: translateX(0%) scale(1);
|
|
866
|
+
opacity: 1;
|
|
867
|
+
}
|
|
868
|
+
80% {
|
|
869
|
+
transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.947368);
|
|
870
|
+
opacity: 0.93;
|
|
871
|
+
}
|
|
872
|
+
85% {
|
|
873
|
+
transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.894736);
|
|
874
|
+
opacity: 0.86;
|
|
875
|
+
}
|
|
876
|
+
90% {
|
|
877
|
+
transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.842104);
|
|
878
|
+
opacity: 0.79;
|
|
879
|
+
}
|
|
880
|
+
95% {
|
|
881
|
+
transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.789472);
|
|
882
|
+
opacity: 0.72;
|
|
883
|
+
}
|
|
884
|
+
100% {
|
|
885
|
+
transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684);
|
|
886
|
+
opacity: 0.65;
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
@keyframes rotate {
|
|
890
|
+
100% {
|
|
891
|
+
transform: rotate(360deg);
|
|
892
|
+
}
|
|
893
|
+
}
|
|
894
|
+
@keyframes travel {
|
|
895
|
+
0% {
|
|
896
|
+
stroke-dashoffset: 0;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
100% {
|
|
900
|
+
stroke-dashoffset: -100;
|
|
901
|
+
}
|
|
902
|
+
}
|
|
681
903
|
.hawa-sr-only {
|
|
682
904
|
position: absolute;
|
|
683
905
|
width: 1px;
|
package/dist/index.d.mts
CHANGED
|
@@ -365,7 +365,7 @@ interface AvatarProps {
|
|
|
365
365
|
declare const Avatar: React__default.FC<AvatarProps>;
|
|
366
366
|
|
|
367
367
|
declare const buttonVariants: (props?: ({
|
|
368
|
-
variant?: "link" | "
|
|
368
|
+
variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "combobox" | "neoBrutalism" | null | undefined;
|
|
369
369
|
size?: "xs" | "sm" | "lg" | "xl" | "default" | "heightless" | "icon" | "smallIcon" | null | undefined;
|
|
370
370
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
371
371
|
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -444,9 +444,10 @@ type LoadingTypes = {
|
|
|
444
444
|
/** Specifies the size of the loading component.*/
|
|
445
445
|
size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
|
|
446
446
|
/** Determines the design of the loading animation.*/
|
|
447
|
-
design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
|
|
447
|
+
design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots" | "squircle" | "square" | "progress" | "orbit";
|
|
448
448
|
/** Specifies the color of the loading component. By default it will inherit the value of <span className="inline-code">--primary</span> global CSS variable*/
|
|
449
449
|
color?: string;
|
|
450
|
+
className?: string;
|
|
450
451
|
};
|
|
451
452
|
declare const Loading: FC<LoadingTypes>;
|
|
452
453
|
|
|
@@ -854,7 +855,7 @@ declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
|
|
|
854
855
|
} & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
855
856
|
declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
|
|
856
857
|
children?: React$1.ReactNode;
|
|
857
|
-
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
858
|
+
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "value" | "heading"> & {
|
|
858
859
|
heading?: React$1.ReactNode;
|
|
859
860
|
value?: string | undefined;
|
|
860
861
|
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
package/dist/index.d.ts
CHANGED
|
@@ -365,7 +365,7 @@ interface AvatarProps {
|
|
|
365
365
|
declare const Avatar: React__default.FC<AvatarProps>;
|
|
366
366
|
|
|
367
367
|
declare const buttonVariants: (props?: ({
|
|
368
|
-
variant?: "link" | "
|
|
368
|
+
variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "combobox" | "neoBrutalism" | null | undefined;
|
|
369
369
|
size?: "xs" | "sm" | "lg" | "xl" | "default" | "heightless" | "icon" | "smallIcon" | null | undefined;
|
|
370
370
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
371
371
|
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -444,9 +444,10 @@ type LoadingTypes = {
|
|
|
444
444
|
/** Specifies the size of the loading component.*/
|
|
445
445
|
size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
|
|
446
446
|
/** Determines the design of the loading animation.*/
|
|
447
|
-
design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
|
|
447
|
+
design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots" | "squircle" | "square" | "progress" | "orbit";
|
|
448
448
|
/** Specifies the color of the loading component. By default it will inherit the value of <span className="inline-code">--primary</span> global CSS variable*/
|
|
449
449
|
color?: string;
|
|
450
|
+
className?: string;
|
|
450
451
|
};
|
|
451
452
|
declare const Loading: FC<LoadingTypes>;
|
|
452
453
|
|
|
@@ -854,7 +855,7 @@ declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
|
|
|
854
855
|
} & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
855
856
|
declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
|
|
856
857
|
children?: React$1.ReactNode;
|
|
857
|
-
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
858
|
+
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "value" | "heading"> & {
|
|
858
859
|
heading?: React$1.ReactNode;
|
|
859
860
|
value?: string | undefined;
|
|
860
861
|
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
package/dist/index.js
CHANGED
|
@@ -366,59 +366,151 @@ var Loading = ({
|
|
|
366
366
|
};
|
|
367
367
|
switch (design.split("-")[0]) {
|
|
368
368
|
case "dots":
|
|
369
|
-
return /* @__PURE__ */ import_react3.default.createElement(
|
|
369
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
370
370
|
"div",
|
|
371
371
|
{
|
|
372
|
-
className: cn(
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
372
|
+
className: cn("hawa-flex hawa-flex-row hawa-gap-2", props.className)
|
|
373
|
+
},
|
|
374
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
375
|
+
"div",
|
|
376
|
+
{
|
|
377
|
+
className: cn(
|
|
378
|
+
"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
|
|
379
|
+
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
|
|
380
|
+
animationStyles[design.split("-")[1]],
|
|
381
|
+
color ? color : "hawa-bg-primary"
|
|
382
|
+
)
|
|
383
|
+
}
|
|
384
|
+
),
|
|
385
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
386
|
+
"div",
|
|
387
|
+
{
|
|
388
|
+
className: cn(
|
|
389
|
+
"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
|
|
390
|
+
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
|
|
391
|
+
animationStyles[design.split("-")[1]],
|
|
392
|
+
color ? color : "hawa-bg-primary"
|
|
393
|
+
)
|
|
394
|
+
}
|
|
395
|
+
),
|
|
396
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
397
|
+
"div",
|
|
398
|
+
{
|
|
399
|
+
className: cn(
|
|
400
|
+
"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
|
|
401
|
+
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
|
|
402
|
+
animationStyles[design.split("-")[1]],
|
|
403
|
+
color ? color : "hawa-bg-primary"
|
|
404
|
+
)
|
|
405
|
+
}
|
|
406
|
+
)
|
|
407
|
+
);
|
|
408
|
+
case "square":
|
|
409
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
410
|
+
"svg",
|
|
391
411
|
{
|
|
392
|
-
className: cn(
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
412
|
+
className: cn("squircle-container", sizeStyles[size]),
|
|
413
|
+
viewBox: "0 0 35 35",
|
|
414
|
+
height: "35",
|
|
415
|
+
width: "35"
|
|
416
|
+
},
|
|
417
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
418
|
+
"rect",
|
|
419
|
+
{
|
|
420
|
+
className: "squircle-track",
|
|
421
|
+
x: "2.5",
|
|
422
|
+
y: "2.5",
|
|
423
|
+
fill: "none",
|
|
424
|
+
strokeWidth: "5px",
|
|
425
|
+
width: "32.5",
|
|
426
|
+
height: "32.5"
|
|
427
|
+
}
|
|
428
|
+
),
|
|
429
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
430
|
+
"rect",
|
|
431
|
+
{
|
|
432
|
+
className: "square-car",
|
|
433
|
+
x: "2.5",
|
|
434
|
+
y: "2.5",
|
|
435
|
+
fill: "none",
|
|
436
|
+
strokeWidth: "5px",
|
|
437
|
+
width: "32.5",
|
|
438
|
+
height: "32.5",
|
|
439
|
+
pathLength: "100"
|
|
440
|
+
}
|
|
441
|
+
)
|
|
442
|
+
);
|
|
443
|
+
case "squircle":
|
|
444
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
402
445
|
"svg",
|
|
403
446
|
{
|
|
404
|
-
className: cn(sizeStyles[size]
|
|
405
|
-
|
|
447
|
+
className: cn("squircle-container", sizeStyles[size]),
|
|
448
|
+
x: "0px",
|
|
449
|
+
y: "0px",
|
|
450
|
+
viewBox: "0 0 37 37",
|
|
451
|
+
height: "37",
|
|
452
|
+
width: "37",
|
|
453
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
406
454
|
},
|
|
407
455
|
/* @__PURE__ */ import_react3.default.createElement(
|
|
408
456
|
"path",
|
|
409
457
|
{
|
|
410
|
-
className: "
|
|
411
|
-
|
|
458
|
+
className: "squircle-track",
|
|
459
|
+
fill: "none",
|
|
460
|
+
strokeWidth: "5",
|
|
461
|
+
pathLength: "100",
|
|
462
|
+
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
|
|
412
463
|
}
|
|
413
464
|
),
|
|
414
465
|
/* @__PURE__ */ import_react3.default.createElement(
|
|
415
466
|
"path",
|
|
416
467
|
{
|
|
417
|
-
className:
|
|
418
|
-
|
|
468
|
+
className: "squircle-car",
|
|
469
|
+
fill: "none",
|
|
470
|
+
strokeWidth: "5",
|
|
471
|
+
pathLength: "100",
|
|
472
|
+
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
|
|
419
473
|
}
|
|
420
474
|
)
|
|
421
|
-
)
|
|
475
|
+
);
|
|
476
|
+
case "progress":
|
|
477
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", { className: "progress-loading" });
|
|
478
|
+
case "orbit":
|
|
479
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", { className: "orbit-container" });
|
|
480
|
+
default:
|
|
481
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
482
|
+
"svg",
|
|
483
|
+
{
|
|
484
|
+
className: cn("circle-container", sizeStyles[size]),
|
|
485
|
+
viewBox: "0 0 40 40",
|
|
486
|
+
height: "40",
|
|
487
|
+
width: "40"
|
|
488
|
+
},
|
|
489
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
490
|
+
"circle",
|
|
491
|
+
{
|
|
492
|
+
className: "circle-track",
|
|
493
|
+
cx: "20",
|
|
494
|
+
cy: "20",
|
|
495
|
+
r: "17.5",
|
|
496
|
+
pathLength: "100",
|
|
497
|
+
strokeWidth: "5px",
|
|
498
|
+
fill: "none"
|
|
499
|
+
}
|
|
500
|
+
),
|
|
501
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
502
|
+
"circle",
|
|
503
|
+
{
|
|
504
|
+
className: "circle-car",
|
|
505
|
+
cx: "20",
|
|
506
|
+
cy: "20",
|
|
507
|
+
r: "17.5",
|
|
508
|
+
pathLength: "100",
|
|
509
|
+
strokeWidth: "5px",
|
|
510
|
+
fill: "none"
|
|
511
|
+
}
|
|
512
|
+
)
|
|
513
|
+
);
|
|
422
514
|
}
|
|
423
515
|
};
|
|
424
516
|
|
package/dist/index.mjs
CHANGED
|
@@ -144,59 +144,151 @@ var Loading = ({
|
|
|
144
144
|
};
|
|
145
145
|
switch (design.split("-")[0]) {
|
|
146
146
|
case "dots":
|
|
147
|
-
return /* @__PURE__ */ React4.createElement(
|
|
147
|
+
return /* @__PURE__ */ React4.createElement(
|
|
148
148
|
"div",
|
|
149
149
|
{
|
|
150
|
-
className: cn(
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
150
|
+
className: cn("hawa-flex hawa-flex-row hawa-gap-2", props.className)
|
|
151
|
+
},
|
|
152
|
+
/* @__PURE__ */ React4.createElement(
|
|
153
|
+
"div",
|
|
154
|
+
{
|
|
155
|
+
className: cn(
|
|
156
|
+
"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
|
|
157
|
+
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
|
|
158
|
+
animationStyles[design.split("-")[1]],
|
|
159
|
+
color ? color : "hawa-bg-primary"
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
),
|
|
163
|
+
/* @__PURE__ */ React4.createElement(
|
|
164
|
+
"div",
|
|
165
|
+
{
|
|
166
|
+
className: cn(
|
|
167
|
+
"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
|
|
168
|
+
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
|
|
169
|
+
animationStyles[design.split("-")[1]],
|
|
170
|
+
color ? color : "hawa-bg-primary"
|
|
171
|
+
)
|
|
172
|
+
}
|
|
173
|
+
),
|
|
174
|
+
/* @__PURE__ */ React4.createElement(
|
|
175
|
+
"div",
|
|
176
|
+
{
|
|
177
|
+
className: cn(
|
|
178
|
+
"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
|
|
179
|
+
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
|
|
180
|
+
animationStyles[design.split("-")[1]],
|
|
181
|
+
color ? color : "hawa-bg-primary"
|
|
182
|
+
)
|
|
183
|
+
}
|
|
184
|
+
)
|
|
185
|
+
);
|
|
186
|
+
case "square":
|
|
187
|
+
return /* @__PURE__ */ React4.createElement(
|
|
188
|
+
"svg",
|
|
169
189
|
{
|
|
170
|
-
className: cn(
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
190
|
+
className: cn("squircle-container", sizeStyles[size]),
|
|
191
|
+
viewBox: "0 0 35 35",
|
|
192
|
+
height: "35",
|
|
193
|
+
width: "35"
|
|
194
|
+
},
|
|
195
|
+
/* @__PURE__ */ React4.createElement(
|
|
196
|
+
"rect",
|
|
197
|
+
{
|
|
198
|
+
className: "squircle-track",
|
|
199
|
+
x: "2.5",
|
|
200
|
+
y: "2.5",
|
|
201
|
+
fill: "none",
|
|
202
|
+
strokeWidth: "5px",
|
|
203
|
+
width: "32.5",
|
|
204
|
+
height: "32.5"
|
|
205
|
+
}
|
|
206
|
+
),
|
|
207
|
+
/* @__PURE__ */ React4.createElement(
|
|
208
|
+
"rect",
|
|
209
|
+
{
|
|
210
|
+
className: "square-car",
|
|
211
|
+
x: "2.5",
|
|
212
|
+
y: "2.5",
|
|
213
|
+
fill: "none",
|
|
214
|
+
strokeWidth: "5px",
|
|
215
|
+
width: "32.5",
|
|
216
|
+
height: "32.5",
|
|
217
|
+
pathLength: "100"
|
|
218
|
+
}
|
|
219
|
+
)
|
|
220
|
+
);
|
|
221
|
+
case "squircle":
|
|
222
|
+
return /* @__PURE__ */ React4.createElement(
|
|
180
223
|
"svg",
|
|
181
224
|
{
|
|
182
|
-
className: cn(sizeStyles[size]
|
|
183
|
-
|
|
225
|
+
className: cn("squircle-container", sizeStyles[size]),
|
|
226
|
+
x: "0px",
|
|
227
|
+
y: "0px",
|
|
228
|
+
viewBox: "0 0 37 37",
|
|
229
|
+
height: "37",
|
|
230
|
+
width: "37",
|
|
231
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
184
232
|
},
|
|
185
233
|
/* @__PURE__ */ React4.createElement(
|
|
186
234
|
"path",
|
|
187
235
|
{
|
|
188
|
-
className: "
|
|
189
|
-
|
|
236
|
+
className: "squircle-track",
|
|
237
|
+
fill: "none",
|
|
238
|
+
strokeWidth: "5",
|
|
239
|
+
pathLength: "100",
|
|
240
|
+
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
|
|
190
241
|
}
|
|
191
242
|
),
|
|
192
243
|
/* @__PURE__ */ React4.createElement(
|
|
193
244
|
"path",
|
|
194
245
|
{
|
|
195
|
-
className:
|
|
196
|
-
|
|
246
|
+
className: "squircle-car",
|
|
247
|
+
fill: "none",
|
|
248
|
+
strokeWidth: "5",
|
|
249
|
+
pathLength: "100",
|
|
250
|
+
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
|
|
197
251
|
}
|
|
198
252
|
)
|
|
199
|
-
)
|
|
253
|
+
);
|
|
254
|
+
case "progress":
|
|
255
|
+
return /* @__PURE__ */ React4.createElement("div", { className: "progress-loading" });
|
|
256
|
+
case "orbit":
|
|
257
|
+
return /* @__PURE__ */ React4.createElement("div", { className: "orbit-container" });
|
|
258
|
+
default:
|
|
259
|
+
return /* @__PURE__ */ React4.createElement(
|
|
260
|
+
"svg",
|
|
261
|
+
{
|
|
262
|
+
className: cn("circle-container", sizeStyles[size]),
|
|
263
|
+
viewBox: "0 0 40 40",
|
|
264
|
+
height: "40",
|
|
265
|
+
width: "40"
|
|
266
|
+
},
|
|
267
|
+
/* @__PURE__ */ React4.createElement(
|
|
268
|
+
"circle",
|
|
269
|
+
{
|
|
270
|
+
className: "circle-track",
|
|
271
|
+
cx: "20",
|
|
272
|
+
cy: "20",
|
|
273
|
+
r: "17.5",
|
|
274
|
+
pathLength: "100",
|
|
275
|
+
strokeWidth: "5px",
|
|
276
|
+
fill: "none"
|
|
277
|
+
}
|
|
278
|
+
),
|
|
279
|
+
/* @__PURE__ */ React4.createElement(
|
|
280
|
+
"circle",
|
|
281
|
+
{
|
|
282
|
+
className: "circle-car",
|
|
283
|
+
cx: "20",
|
|
284
|
+
cy: "20",
|
|
285
|
+
r: "17.5",
|
|
286
|
+
pathLength: "100",
|
|
287
|
+
strokeWidth: "5px",
|
|
288
|
+
fill: "none"
|
|
289
|
+
}
|
|
290
|
+
)
|
|
291
|
+
);
|
|
200
292
|
}
|
|
201
293
|
};
|
|
202
294
|
|