@sikka/hawa 0.17.11-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 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
@@ -185,12 +185,21 @@ type PinInputTypes = {
185
185
  };
186
186
  declare const PinInput: FC<PinInputTypes>;
187
187
 
188
+ type LabelProps = {
189
+ hint?: React$1.ReactNode;
190
+ hintSide?: PositionType;
191
+ htmlFor?: string;
192
+ required?: boolean;
193
+ };
194
+ declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
195
+
188
196
  type PhoneInputTypes = {
189
197
  preferredCountry?: {
190
198
  label: string;
191
199
  };
192
200
  helperText?: any;
193
201
  label?: string;
202
+ labelProps?: LabelProps;
194
203
  handleChange?: (value: string) => void;
195
204
  };
196
205
  declare const PhoneInput: FC<PhoneInputTypes>;
@@ -205,17 +214,6 @@ type CheckboxProps = CheckBoxTypes & React$1.ComponentProps<typeof CheckboxEleme
205
214
  declare const Checkbox: React$1.FC<CheckboxProps>;
206
215
  declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
207
216
 
208
- type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & {
209
- hint?: React$1.ReactNode;
210
- hintSide?: PositionType;
211
- required?: boolean;
212
- };
213
- declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & {
214
- hint?: React$1.ReactNode;
215
- hintSide?: PositionType | undefined;
216
- required?: boolean | undefined;
217
- } & React$1.RefAttributes<HTMLLabelElement>>;
218
-
219
217
  type RadioOptionsTypes = {
220
218
  value: any;
221
219
  label: any;
@@ -233,6 +231,7 @@ type RadioTypes = {
233
231
  direction?: DirectionType;
234
232
  helperText?: string;
235
233
  labelProps?: LabelProps;
234
+ label?: string;
236
235
  };
237
236
  declare const Radio: FC<RadioTypes>;
238
237
 
@@ -253,9 +252,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
253
252
  type ColorPickerTypes = {
254
253
  label?: string;
255
254
  id?: string;
256
- hint?: string;
257
- hintSide?: PositionType;
258
- isRequired?: boolean;
255
+ labelProps?: LabelProps;
259
256
  helperText?: string;
260
257
  /** The hex code for the color */
261
258
  color?: any;
@@ -276,13 +273,10 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
276
273
  width?: "small" | "full" | "normal" | "auto" | undefined;
277
274
  /** The label of the input field */
278
275
  label?: any;
279
- hint?: string | undefined;
280
- hintSide?: PositionType | undefined;
281
- /** If true, it will show a red asterisk next to the label*/
282
- isRequired?: boolean | undefined;
276
+ labelProps?: LabelProps | undefined;
283
277
  /** Disable/Enable multiple line text input field */
284
278
  multiline?: boolean | undefined;
285
- /** The small red text under the input field to show validation or a hint. */
279
+ /** The small red text under the input field to show validation. */
286
280
  helperText?: any;
287
281
  forceHideHelperText?: boolean | undefined;
288
282
  inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
@@ -315,8 +309,7 @@ type ComboboxTypes<T> = {
315
309
  id?: string;
316
310
  /** The label of the input field */
317
311
  label?: any;
318
- hint?: string;
319
- hintSide?: PositionType;
312
+ labelProps?: LabelProps;
320
313
  /** If true, it will show a red asterisk next to the label*/
321
314
  isRequired?: boolean;
322
315
  onChange?: (e: any) => void;
@@ -353,6 +346,7 @@ type SelectTypes = {
353
346
  hideIndicator?: boolean;
354
347
  phoneCode?: boolean;
355
348
  isLoading?: any;
349
+ labelProps?: LabelProps;
356
350
  texts?: {
357
351
  noOptions?: string;
358
352
  createLabel?: string;
@@ -371,7 +365,7 @@ interface AvatarProps {
371
365
  declare const Avatar: React__default.FC<AvatarProps>;
372
366
 
373
367
  declare const buttonVariants: (props?: ({
374
- variant?: "link" | "combobox" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
368
+ variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "combobox" | "neoBrutalism" | null | undefined;
375
369
  size?: "xs" | "sm" | "lg" | "xl" | "default" | "heightless" | "icon" | "smallIcon" | null | undefined;
376
370
  } & class_variance_authority_types.ClassProp) | undefined) => string;
377
371
  interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -450,9 +444,10 @@ type LoadingTypes = {
450
444
  /** Specifies the size of the loading component.*/
451
445
  size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
452
446
  /** Determines the design of the loading animation.*/
453
- design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
447
+ design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots" | "squircle" | "square" | "progress" | "orbit";
454
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*/
455
449
  color?: string;
450
+ className?: string;
456
451
  };
457
452
  declare const Loading: FC<LoadingTypes>;
458
453
 
@@ -860,7 +855,7 @@ declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
860
855
  } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
861
856
  declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
862
857
  children?: React$1.ReactNode;
863
- } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "heading" | "value"> & {
858
+ } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "value" | "heading"> & {
864
859
  heading?: React$1.ReactNode;
865
860
  value?: string | undefined;
866
861
  } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
package/dist/index.d.ts CHANGED
@@ -185,12 +185,21 @@ type PinInputTypes = {
185
185
  };
186
186
  declare const PinInput: FC<PinInputTypes>;
187
187
 
188
+ type LabelProps = {
189
+ hint?: React$1.ReactNode;
190
+ hintSide?: PositionType;
191
+ htmlFor?: string;
192
+ required?: boolean;
193
+ };
194
+ declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
195
+
188
196
  type PhoneInputTypes = {
189
197
  preferredCountry?: {
190
198
  label: string;
191
199
  };
192
200
  helperText?: any;
193
201
  label?: string;
202
+ labelProps?: LabelProps;
194
203
  handleChange?: (value: string) => void;
195
204
  };
196
205
  declare const PhoneInput: FC<PhoneInputTypes>;
@@ -205,17 +214,6 @@ type CheckboxProps = CheckBoxTypes & React$1.ComponentProps<typeof CheckboxEleme
205
214
  declare const Checkbox: React$1.FC<CheckboxProps>;
206
215
  declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
207
216
 
208
- type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & {
209
- hint?: React$1.ReactNode;
210
- hintSide?: PositionType;
211
- required?: boolean;
212
- };
213
- declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & {
214
- hint?: React$1.ReactNode;
215
- hintSide?: PositionType | undefined;
216
- required?: boolean | undefined;
217
- } & React$1.RefAttributes<HTMLLabelElement>>;
218
-
219
217
  type RadioOptionsTypes = {
220
218
  value: any;
221
219
  label: any;
@@ -233,6 +231,7 @@ type RadioTypes = {
233
231
  direction?: DirectionType;
234
232
  helperText?: string;
235
233
  labelProps?: LabelProps;
234
+ label?: string;
236
235
  };
237
236
  declare const Radio: FC<RadioTypes>;
238
237
 
@@ -253,9 +252,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
253
252
  type ColorPickerTypes = {
254
253
  label?: string;
255
254
  id?: string;
256
- hint?: string;
257
- hintSide?: PositionType;
258
- isRequired?: boolean;
255
+ labelProps?: LabelProps;
259
256
  helperText?: string;
260
257
  /** The hex code for the color */
261
258
  color?: any;
@@ -276,13 +273,10 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
276
273
  width?: "small" | "full" | "normal" | "auto" | undefined;
277
274
  /** The label of the input field */
278
275
  label?: any;
279
- hint?: string | undefined;
280
- hintSide?: PositionType | undefined;
281
- /** If true, it will show a red asterisk next to the label*/
282
- isRequired?: boolean | undefined;
276
+ labelProps?: LabelProps | undefined;
283
277
  /** Disable/Enable multiple line text input field */
284
278
  multiline?: boolean | undefined;
285
- /** The small red text under the input field to show validation or a hint. */
279
+ /** The small red text under the input field to show validation. */
286
280
  helperText?: any;
287
281
  forceHideHelperText?: boolean | undefined;
288
282
  inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
@@ -315,8 +309,7 @@ type ComboboxTypes<T> = {
315
309
  id?: string;
316
310
  /** The label of the input field */
317
311
  label?: any;
318
- hint?: string;
319
- hintSide?: PositionType;
312
+ labelProps?: LabelProps;
320
313
  /** If true, it will show a red asterisk next to the label*/
321
314
  isRequired?: boolean;
322
315
  onChange?: (e: any) => void;
@@ -353,6 +346,7 @@ type SelectTypes = {
353
346
  hideIndicator?: boolean;
354
347
  phoneCode?: boolean;
355
348
  isLoading?: any;
349
+ labelProps?: LabelProps;
356
350
  texts?: {
357
351
  noOptions?: string;
358
352
  createLabel?: string;
@@ -371,7 +365,7 @@ interface AvatarProps {
371
365
  declare const Avatar: React__default.FC<AvatarProps>;
372
366
 
373
367
  declare const buttonVariants: (props?: ({
374
- variant?: "link" | "combobox" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
368
+ variant?: "link" | "default" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "combobox" | "neoBrutalism" | null | undefined;
375
369
  size?: "xs" | "sm" | "lg" | "xl" | "default" | "heightless" | "icon" | "smallIcon" | null | undefined;
376
370
  } & class_variance_authority_types.ClassProp) | undefined) => string;
377
371
  interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -450,9 +444,10 @@ type LoadingTypes = {
450
444
  /** Specifies the size of the loading component.*/
451
445
  size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
452
446
  /** Determines the design of the loading animation.*/
453
- design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
447
+ design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots" | "squircle" | "square" | "progress" | "orbit";
454
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*/
455
449
  color?: string;
450
+ className?: string;
456
451
  };
457
452
  declare const Loading: FC<LoadingTypes>;
458
453
 
@@ -860,7 +855,7 @@ declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
860
855
  } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
861
856
  declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
862
857
  children?: React$1.ReactNode;
863
- } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "heading" | "value"> & {
858
+ } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "value" | "heading"> & {
864
859
  heading?: React$1.ReactNode;
865
860
  value?: string | undefined;
866
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("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ import_react3.default.createElement(
369
+ return /* @__PURE__ */ import_react3.default.createElement(
370
370
  "div",
371
371
  {
372
- className: cn(
373
- "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
374
- size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
375
- animationStyles[design.split("-")[1]],
376
- color ? color : "hawa-bg-primary"
377
- )
378
- }
379
- ), /* @__PURE__ */ import_react3.default.createElement(
380
- "div",
381
- {
382
- className: cn(
383
- "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
384
- size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
385
- animationStyles[design.split("-")[1]],
386
- color ? color : "hawa-bg-primary"
387
- )
388
- }
389
- ), /* @__PURE__ */ import_react3.default.createElement(
390
- "div",
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
- "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
394
- size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
395
- animationStyles[design.split("-")[1]],
396
- color ? color : "hawa-bg-primary"
397
- )
398
- }
399
- ));
400
- default:
401
- return /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-x-3" }, /* @__PURE__ */ import_react3.default.createElement("div", { "aria-label": "Loading...", role: "status" }, /* @__PURE__ */ import_react3.default.createElement(
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], "hawa-animate-spin"),
405
- viewBox: "3 3 18 18"
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: "hawa-fill-primary/20",
411
- d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
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: color ? color : "hawa-fill-primary",
418
- d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
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
 
@@ -2928,36 +3020,34 @@ var Tooltip = ({
2928
3020
  };
2929
3021
 
2930
3022
  // components/elements/Label.tsx
2931
- var Label2 = React14.forwardRef(
2932
- ({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
2933
- "label",
2934
- {
2935
- ref,
2936
- className: cn(
2937
- "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
2938
- className
2939
- ),
2940
- ...props
2941
- },
2942
- children,
2943
- required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
2944
- ), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.createElement(
2945
- "svg",
2946
- {
2947
- xmlns: "http://www.w3.org/2000/svg",
2948
- className: "hawa-w-[14px] hawa-h-[14px] hawa-cursor-help",
2949
- viewBox: "0 0 24 24",
2950
- fill: "none",
2951
- stroke: "currentColor",
2952
- strokeWidth: "2",
2953
- strokeLinecap: "round",
2954
- strokeLinejoin: "round"
2955
- },
2956
- /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
2957
- /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
2958
- /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
2959
- )))
2960
- );
3023
+ var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
3024
+ "label",
3025
+ {
3026
+ ref,
3027
+ className: cn(
3028
+ "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
3029
+ className
3030
+ ),
3031
+ ...props
3032
+ },
3033
+ children,
3034
+ required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
3035
+ ), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.createElement(
3036
+ "svg",
3037
+ {
3038
+ xmlns: "http://www.w3.org/2000/svg",
3039
+ className: "hawa-w-[14px] hawa-h-[14px] hawa-cursor-help",
3040
+ viewBox: "0 0 24 24",
3041
+ fill: "none",
3042
+ stroke: "currentColor",
3043
+ strokeWidth: "2",
3044
+ strokeLinecap: "round",
3045
+ strokeLinejoin: "round"
3046
+ },
3047
+ /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
3048
+ /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
3049
+ /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
3050
+ ))));
2961
3051
  Label2.displayName = "Label";
2962
3052
 
2963
3053
  // components/elements/Skeleton.tsx
@@ -2988,7 +3078,11 @@ function Skeleton({
2988
3078
  }
2989
3079
 
2990
3080
  // components/elements/Select.tsx
2991
- var Select = ({ labelKey = "label", ...props }) => {
3081
+ var Select = ({
3082
+ labelProps,
3083
+ labelKey = "label",
3084
+ ...props
3085
+ }) => {
2992
3086
  const NoOption = () => {
2993
3087
  var _a, _b;
2994
3088
  return /* @__PURE__ */ import_react11.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
@@ -3050,7 +3144,7 @@ var Select = ({ labelKey = "label", ...props }) => {
3050
3144
  props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
3051
3145
  )
3052
3146
  },
3053
- props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, null, props.label),
3147
+ props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, { ...labelProps }, props.label),
3054
3148
  props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
3055
3149
  // TODO: enable keyboard to go to the next item in the list
3056
3150
  /* @__PURE__ */ import_react11.default.createElement(
@@ -3134,7 +3228,7 @@ var Select = ({ labelKey = "label", ...props }) => {
3134
3228
  };
3135
3229
 
3136
3230
  // components/elements/PhoneInput.tsx
3137
- var PhoneInput = (props) => {
3231
+ var PhoneInput = ({ labelProps, ...props }) => {
3138
3232
  const [phoneNumber, setPhoneNumber] = (0, import_react12.useState)("");
3139
3233
  const [countryCode, setCountryCode] = (0, import_react12.useState)(props.preferredCountry);
3140
3234
  const inputRef = (0, import_react12.useRef)(null);
@@ -3156,7 +3250,7 @@ var PhoneInput = (props) => {
3156
3250
  console.log("handleChange prop was not provided in <PhoneInput/>");
3157
3251
  }
3158
3252
  };
3159
- return /* @__PURE__ */ import_react12.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ import_react12.default.createElement(Label2, null, props.label), /* @__PURE__ */ import_react12.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react12.default.createElement(
3253
+ return /* @__PURE__ */ import_react12.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ import_react12.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react12.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react12.default.createElement(
3160
3254
  Select,
3161
3255
  {
3162
3256
  width: "fit",
@@ -3410,7 +3504,7 @@ var Radio = ({
3410
3504
  /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
3411
3505
  ))));
3412
3506
  default:
3413
- return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, labelProps && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, labelProps.children), /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
3507
+ return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
3414
3508
  "div",
3415
3509
  {
3416
3510
  className: cn(
@@ -3586,6 +3680,7 @@ var ColorPicker = ({
3586
3680
  containerProps,
3587
3681
  colorPickerProps,
3588
3682
  textInputProps,
3683
+ labelProps,
3589
3684
  ...props
3590
3685
  }) => {
3591
3686
  const [selectedColor, setSelectedColor] = (0, import_react14.useState)(props.color);
@@ -3611,16 +3706,7 @@ var ColorPicker = ({
3611
3706
  inputElement.dispatchEvent(event);
3612
3707
  }
3613
3708
  };
3614
- return /* @__PURE__ */ import_react14.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ import_react14.default.createElement(
3615
- Label2,
3616
- {
3617
- htmlFor: props.id,
3618
- hint: props.hint,
3619
- hintSide: props.hintSide,
3620
- required: props.isRequired
3621
- },
3622
- props.label
3623
- ), /* @__PURE__ */ import_react14.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react14.default.createElement(
3709
+ return /* @__PURE__ */ import_react14.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ import_react14.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react14.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react14.default.createElement(
3624
3710
  "div",
3625
3711
  {
3626
3712
  style: { height: 40, backgroundColor: selectedColor },
@@ -3677,6 +3763,7 @@ var Input = (0, import_react15.forwardRef)(
3677
3763
  width = "full",
3678
3764
  preview = false,
3679
3765
  forceHideHelperText = false,
3766
+ labelProps,
3680
3767
  ...props
3681
3768
  }, ref) => {
3682
3769
  var _a;
@@ -3704,16 +3791,7 @@ var Input = (0, import_react15.forwardRef)(
3704
3791
  "hawa-w-full hawa-gap-2"
3705
3792
  )
3706
3793
  },
3707
- props.label && /* @__PURE__ */ import_react15.default.createElement(
3708
- Label2,
3709
- {
3710
- htmlFor: props.id,
3711
- hint: props.hint,
3712
- hintSide: props.hintSide,
3713
- required: props.isRequired
3714
- },
3715
- props.label
3716
- ),
3794
+ props.label && /* @__PURE__ */ import_react15.default.createElement(Label2, { ...labelProps }, props.label),
3717
3795
  props.isLoading ? /* @__PURE__ */ import_react15.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react15.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
3718
3796
  "div",
3719
3797
  {
@@ -4141,6 +4219,7 @@ var Combobox = React28.forwardRef(
4141
4219
  valueKey = "value",
4142
4220
  defaultValue = "",
4143
4221
  popoverClassName,
4222
+ labelProps,
4144
4223
  data,
4145
4224
  ...props
4146
4225
  }, ref) => {
@@ -4163,17 +4242,7 @@ var Combobox = React28.forwardRef(
4163
4242
  props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
4164
4243
  )
4165
4244
  },
4166
- props.label && /* @__PURE__ */ React28.createElement(
4167
- Label2,
4168
- {
4169
- htmlFor: props.id,
4170
- hint: props.hint,
4171
- hintSide: props.hintSide,
4172
- required: props.isRequired
4173
- },
4174
- props.label
4175
- ),
4176
- " ",
4245
+ props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
4177
4246
  /* @__PURE__ */ React28.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React28.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React28.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React28.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React28.createElement(
4178
4247
  "div",
4179
4248
  {
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("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React4.createElement(
147
+ return /* @__PURE__ */ React4.createElement(
148
148
  "div",
149
149
  {
150
- className: cn(
151
- "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
152
- size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
153
- animationStyles[design.split("-")[1]],
154
- color ? color : "hawa-bg-primary"
155
- )
156
- }
157
- ), /* @__PURE__ */ React4.createElement(
158
- "div",
159
- {
160
- className: cn(
161
- "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
162
- size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
163
- animationStyles[design.split("-")[1]],
164
- color ? color : "hawa-bg-primary"
165
- )
166
- }
167
- ), /* @__PURE__ */ React4.createElement(
168
- "div",
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
- "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
172
- size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
173
- animationStyles[design.split("-")[1]],
174
- color ? color : "hawa-bg-primary"
175
- )
176
- }
177
- ));
178
- default:
179
- return /* @__PURE__ */ React4.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-x-3" }, /* @__PURE__ */ React4.createElement("div", { "aria-label": "Loading...", role: "status" }, /* @__PURE__ */ React4.createElement(
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], "hawa-animate-spin"),
183
- viewBox: "3 3 18 18"
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: "hawa-fill-primary/20",
189
- d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
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: color ? color : "hawa-fill-primary",
196
- d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
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
 
@@ -2706,36 +2798,34 @@ var Tooltip = ({
2706
2798
  };
2707
2799
 
2708
2800
  // components/elements/Label.tsx
2709
- var Label2 = React14.forwardRef(
2710
- ({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
2711
- "label",
2712
- {
2713
- ref,
2714
- className: cn(
2715
- "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
2716
- className
2717
- ),
2718
- ...props
2719
- },
2720
- children,
2721
- required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
2722
- ), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.createElement(
2723
- "svg",
2724
- {
2725
- xmlns: "http://www.w3.org/2000/svg",
2726
- className: "hawa-w-[14px] hawa-h-[14px] hawa-cursor-help",
2727
- viewBox: "0 0 24 24",
2728
- fill: "none",
2729
- stroke: "currentColor",
2730
- strokeWidth: "2",
2731
- strokeLinecap: "round",
2732
- strokeLinejoin: "round"
2733
- },
2734
- /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
2735
- /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
2736
- /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
2737
- )))
2738
- );
2801
+ var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
2802
+ "label",
2803
+ {
2804
+ ref,
2805
+ className: cn(
2806
+ "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
2807
+ className
2808
+ ),
2809
+ ...props
2810
+ },
2811
+ children,
2812
+ required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
2813
+ ), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.createElement(
2814
+ "svg",
2815
+ {
2816
+ xmlns: "http://www.w3.org/2000/svg",
2817
+ className: "hawa-w-[14px] hawa-h-[14px] hawa-cursor-help",
2818
+ viewBox: "0 0 24 24",
2819
+ fill: "none",
2820
+ stroke: "currentColor",
2821
+ strokeWidth: "2",
2822
+ strokeLinecap: "round",
2823
+ strokeLinejoin: "round"
2824
+ },
2825
+ /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
2826
+ /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
2827
+ /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
2828
+ ))));
2739
2829
  Label2.displayName = "Label";
2740
2830
 
2741
2831
  // components/elements/Skeleton.tsx
@@ -2766,7 +2856,11 @@ function Skeleton({
2766
2856
  }
2767
2857
 
2768
2858
  // components/elements/Select.tsx
2769
- var Select = ({ labelKey = "label", ...props }) => {
2859
+ var Select = ({
2860
+ labelProps,
2861
+ labelKey = "label",
2862
+ ...props
2863
+ }) => {
2770
2864
  const NoOption = () => {
2771
2865
  var _a, _b;
2772
2866
  return /* @__PURE__ */ React16.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
@@ -2828,7 +2922,7 @@ var Select = ({ labelKey = "label", ...props }) => {
2828
2922
  props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
2829
2923
  )
2830
2924
  },
2831
- props.label && /* @__PURE__ */ React16.createElement(Label2, null, props.label),
2925
+ props.label && /* @__PURE__ */ React16.createElement(Label2, { ...labelProps }, props.label),
2832
2926
  props.isLoading ? /* @__PURE__ */ React16.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
2833
2927
  // TODO: enable keyboard to go to the next item in the list
2834
2928
  /* @__PURE__ */ React16.createElement(
@@ -2912,7 +3006,7 @@ var Select = ({ labelKey = "label", ...props }) => {
2912
3006
  };
2913
3007
 
2914
3008
  // components/elements/PhoneInput.tsx
2915
- var PhoneInput = (props) => {
3009
+ var PhoneInput = ({ labelProps, ...props }) => {
2916
3010
  const [phoneNumber, setPhoneNumber] = useState5("");
2917
3011
  const [countryCode, setCountryCode] = useState5(props.preferredCountry);
2918
3012
  const inputRef = useRef2(null);
@@ -2934,7 +3028,7 @@ var PhoneInput = (props) => {
2934
3028
  console.log("handleChange prop was not provided in <PhoneInput/>");
2935
3029
  }
2936
3030
  };
2937
- return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ React17.createElement(Label2, null, props.label), /* @__PURE__ */ React17.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React17.createElement(
3031
+ return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ React17.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React17.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React17.createElement(
2938
3032
  Select,
2939
3033
  {
2940
3034
  width: "fit",
@@ -3188,7 +3282,7 @@ var Radio = ({
3188
3282
  /* @__PURE__ */ React19.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React19.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
3189
3283
  ))));
3190
3284
  default:
3191
- return /* @__PURE__ */ React19.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, labelProps && /* @__PURE__ */ React19.createElement(Label2, { ...labelProps }, labelProps.children), /* @__PURE__ */ React19.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React19.createElement(
3285
+ return /* @__PURE__ */ React19.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React19.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React19.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React19.createElement(
3192
3286
  "div",
3193
3287
  {
3194
3288
  className: cn(
@@ -3367,6 +3461,7 @@ var ColorPicker = ({
3367
3461
  containerProps,
3368
3462
  colorPickerProps,
3369
3463
  textInputProps,
3464
+ labelProps,
3370
3465
  ...props
3371
3466
  }) => {
3372
3467
  const [selectedColor, setSelectedColor] = useState8(props.color);
@@ -3392,16 +3487,7 @@ var ColorPicker = ({
3392
3487
  inputElement.dispatchEvent(event);
3393
3488
  }
3394
3489
  };
3395
- return /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React23.createElement(
3396
- Label2,
3397
- {
3398
- htmlFor: props.id,
3399
- hint: props.hint,
3400
- hintSide: props.hintSide,
3401
- required: props.isRequired
3402
- },
3403
- props.label
3404
- ), /* @__PURE__ */ React23.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React23.createElement(
3490
+ return /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React23.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React23.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React23.createElement(
3405
3491
  "div",
3406
3492
  {
3407
3493
  style: { height: 40, backgroundColor: selectedColor },
@@ -3458,6 +3544,7 @@ var Input = forwardRef9(
3458
3544
  width = "full",
3459
3545
  preview = false,
3460
3546
  forceHideHelperText = false,
3547
+ labelProps,
3461
3548
  ...props
3462
3549
  }, ref) => {
3463
3550
  var _a;
@@ -3485,16 +3572,7 @@ var Input = forwardRef9(
3485
3572
  "hawa-w-full hawa-gap-2"
3486
3573
  )
3487
3574
  },
3488
- props.label && /* @__PURE__ */ React24.createElement(
3489
- Label2,
3490
- {
3491
- htmlFor: props.id,
3492
- hint: props.hint,
3493
- hintSide: props.hintSide,
3494
- required: props.isRequired
3495
- },
3496
- props.label
3497
- ),
3575
+ props.label && /* @__PURE__ */ React24.createElement(Label2, { ...labelProps }, props.label),
3498
3576
  props.isLoading ? /* @__PURE__ */ React24.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
3499
3577
  "div",
3500
3578
  {
@@ -3922,6 +4000,7 @@ var Combobox = React28.forwardRef(
3922
4000
  valueKey = "value",
3923
4001
  defaultValue = "",
3924
4002
  popoverClassName,
4003
+ labelProps,
3925
4004
  data,
3926
4005
  ...props
3927
4006
  }, ref) => {
@@ -3944,17 +4023,7 @@ var Combobox = React28.forwardRef(
3944
4023
  props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
3945
4024
  )
3946
4025
  },
3947
- props.label && /* @__PURE__ */ React28.createElement(
3948
- Label2,
3949
- {
3950
- htmlFor: props.id,
3951
- hint: props.hint,
3952
- hintSide: props.hintSide,
3953
- required: props.isRequired
3954
- },
3955
- props.label
3956
- ),
3957
- " ",
4026
+ props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
3958
4027
  /* @__PURE__ */ React28.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React28.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React28.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React28.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React28.createElement(
3959
4028
  "div",
3960
4029
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.17.11-next",
3
+ "version": "0.18.0-next",
4
4
  "description": "Modern UI Kit made with Tailwind",
5
5
  "author": {
6
6
  "name": "Sikka Software",
@@ -43,6 +43,7 @@
43
43
  "build": "next build",
44
44
  "start": "next start -p 3032",
45
45
  "lint": "next lint",
46
+ "check": "tsc --noEmit",
46
47
  "test": "jest",
47
48
  "storybook": "storybook dev -p 6006",
48
49
  "build-storybook": "storybook build",