mado-ui 0.1.2 → 0.2.0
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/css/index.css +161 -88
- package/dist/components/button.d.ts +1 -1
- package/dist/components/form/index.d.ts +2 -1
- package/dist/components/form/input/index.d.ts +4 -4
- package/dist/components/form/submit-button.d.ts +1 -1
- package/dist/components/form/textarea.d.ts +18 -0
- package/dist/components/heading.d.ts +9 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/link.d.ts +6 -11
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +290 -146
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +289 -144
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -769,15 +769,15 @@ function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props
|
|
|
769
769
|
: 'prefetch' }));
|
|
770
770
|
}
|
|
771
771
|
// * Styles
|
|
772
|
-
const baseClasses = twSort('
|
|
773
|
-
const lineStaticClasses = tailwindMerge.twJoin(baseClasses, '
|
|
774
|
-
const lineClasses = tailwindMerge.twJoin(lineStaticClasses, '
|
|
772
|
+
const baseClasses = twSort('isolate inline-block cursor-pointer duration-300 ease-exponential after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:scale-95 active:after:opacity-100');
|
|
773
|
+
const lineStaticClasses = tailwindMerge.twJoin(baseClasses, 'whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current');
|
|
774
|
+
const lineClasses = tailwindMerge.twJoin(lineStaticClasses, 'whitespace-nowrap transition-transform after:transition-transform after:ease-exponential');
|
|
775
775
|
const scaleXClasses = 'after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100';
|
|
776
776
|
const scaleYClasses = 'after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100';
|
|
777
777
|
const lineNormalClasses = tailwindMerge.twJoin([
|
|
778
778
|
lineClasses,
|
|
779
779
|
scaleYClasses,
|
|
780
|
-
'
|
|
780
|
+
'after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0',
|
|
781
781
|
]);
|
|
782
782
|
const lineLtrClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
|
|
783
783
|
const lineRtlClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
|
|
@@ -785,160 +785,151 @@ const lineCenterClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses]);
|
|
|
785
785
|
const lineLiftClasses = tailwindMerge.twJoin([
|
|
786
786
|
lineClasses,
|
|
787
787
|
scaleYClasses,
|
|
788
|
-
'
|
|
788
|
+
'after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100',
|
|
789
789
|
]);
|
|
790
|
-
const fillClasses = tailwindMerge.twJoin(baseClasses, '
|
|
790
|
+
const fillClasses = tailwindMerge.twJoin(baseClasses, 'whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-zinc-50 pointer-fine:hover:text-zinc-50');
|
|
791
791
|
// Define theme-specific fill color transition classes
|
|
792
792
|
const getFillColorTransitionClasses = (theme = 'blue') => {
|
|
793
793
|
switch (theme) {
|
|
794
794
|
case 'brown':
|
|
795
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-brown contrast-more:after:bg-ui-brown
|
|
795
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-brown after:transition-transform contrast-more:after:bg-ui-brown');
|
|
796
796
|
case 'green':
|
|
797
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-green contrast-more:after:bg-ui-green
|
|
797
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-green after:transition-transform contrast-more:after:bg-ui-green');
|
|
798
798
|
case 'grey':
|
|
799
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-grey contrast-more:after:bg-ui-grey
|
|
799
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-grey after:transition-transform contrast-more:after:bg-ui-grey');
|
|
800
800
|
case 'sky-blue':
|
|
801
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-sky-blue contrast-more:after:bg-ui-sky-blue
|
|
801
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-sky-blue after:transition-transform contrast-more:after:bg-ui-sky-blue');
|
|
802
802
|
case 'magenta':
|
|
803
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-magenta contrast-more:after:bg-ui-magenta
|
|
803
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-magenta after:transition-transform contrast-more:after:bg-ui-magenta');
|
|
804
804
|
case 'neutral':
|
|
805
805
|
return tailwindMerge.twJoin(fillClasses, 'after:bg-zinc-700 after:transition-transform contrast-more:after:bg-zinc-700 dark:after:bg-zinc-300 dark:contrast-more:after:bg-zinc-300');
|
|
806
806
|
case 'orange':
|
|
807
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-orange contrast-more:after:bg-ui-orange
|
|
807
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-orange after:transition-transform contrast-more:after:bg-ui-orange');
|
|
808
808
|
case 'pink':
|
|
809
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-pink contrast-more:after:bg-ui-pink
|
|
810
|
-
case 'primary':
|
|
811
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-primary-500 contrast-more:after:bg-primary-500 after:transition-transform');
|
|
809
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-pink after:transition-transform contrast-more:after:bg-ui-pink');
|
|
812
810
|
case 'purple':
|
|
813
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-purple contrast-more:after:bg-ui-purple
|
|
811
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-purple after:transition-transform contrast-more:after:bg-ui-purple');
|
|
814
812
|
case 'red':
|
|
815
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-red contrast-more:after:bg-ui-red
|
|
813
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-red after:transition-transform contrast-more:after:bg-ui-red');
|
|
816
814
|
case 'violet':
|
|
817
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-violet contrast-more:after:bg-ui-violet
|
|
815
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-violet after:transition-transform contrast-more:after:bg-ui-violet');
|
|
818
816
|
case 'yellow':
|
|
819
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-yellow contrast-more:after:bg-ui-yellow
|
|
817
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-yellow after:transition-transform contrast-more:after:bg-ui-yellow');
|
|
820
818
|
case 'blue':
|
|
821
819
|
default:
|
|
822
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-blue contrast-more:after:bg-ui-blue
|
|
820
|
+
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-blue after:transition-transform contrast-more:after:bg-ui-blue');
|
|
823
821
|
}
|
|
824
822
|
};
|
|
825
823
|
// Define theme-specific fill center classes
|
|
826
824
|
const getFillCenterClasses = (theme = 'blue') => {
|
|
827
825
|
switch (theme) {
|
|
828
826
|
case 'brown':
|
|
829
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-brown/0
|
|
827
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-brown/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-brown pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-brown');
|
|
830
828
|
case 'green':
|
|
831
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-green/0
|
|
829
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-green/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-green pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-green');
|
|
832
830
|
case 'grey':
|
|
833
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-grey/0
|
|
831
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-grey/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-grey pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-grey');
|
|
834
832
|
case 'sky-blue':
|
|
835
|
-
return tailwindMerge.twJoin(fillClasses, 'after:
|
|
833
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-sky-blue/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-sky-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-sky-blue');
|
|
836
834
|
case 'magenta':
|
|
837
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-magenta/0
|
|
835
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-magenta/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-magenta pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-magenta');
|
|
838
836
|
case 'neutral':
|
|
839
|
-
return tailwindMerge.twJoin(fillClasses, '
|
|
837
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-zinc-700/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-zinc-700 dark:after:bg-zinc-300/0 dark:active:after:bg-zinc-300 pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-zinc-700 dark:pointer-fine:hover:after:bg-zinc-300');
|
|
840
838
|
case 'orange':
|
|
841
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-orange/0
|
|
839
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-orange/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-orange pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-orange');
|
|
842
840
|
case 'pink':
|
|
843
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-pink/0
|
|
844
|
-
case 'primary':
|
|
845
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-primary-500/0 active:after:bg-primary-500 pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-primary-500 after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
|
|
841
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-pink/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-pink pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-pink');
|
|
846
842
|
case 'purple':
|
|
847
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-purple/0
|
|
843
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-purple/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-purple pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-purple');
|
|
848
844
|
case 'red':
|
|
849
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-red/0
|
|
845
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-red/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-red pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-red');
|
|
850
846
|
case 'violet':
|
|
851
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-violet/0
|
|
847
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-violet/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-violet pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-violet');
|
|
852
848
|
case 'yellow':
|
|
853
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-yellow/0
|
|
849
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-yellow/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-yellow pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-yellow');
|
|
854
850
|
case 'blue':
|
|
855
851
|
default:
|
|
856
|
-
return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-blue/0
|
|
852
|
+
return tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-blue/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-blue');
|
|
857
853
|
}
|
|
858
854
|
};
|
|
859
855
|
const multilineBaseClasses = twSort('bg-linear-to-r from-current to-current bg-no-repeat active:scale-95');
|
|
860
856
|
const multilineLineStaticClasses = 'underline';
|
|
861
|
-
const multilineNormalClasses = twSort('
|
|
862
|
-
const multilineClasses = tailwindMerge.twJoin(multilineBaseClasses, 'ease-exponential
|
|
857
|
+
const multilineNormalClasses = twSort('underline-offset-1 active:underline pointer-fine:hover:underline');
|
|
858
|
+
const multilineClasses = tailwindMerge.twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
|
|
863
859
|
const multilineLineClasses = tailwindMerge.twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
|
|
864
|
-
const multilineXClasses = tailwindMerge.twJoin(multilineLineClasses, '
|
|
860
|
+
const multilineXClasses = tailwindMerge.twJoin(multilineLineClasses, 'bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]');
|
|
865
861
|
const multilineLineRtlClasses = tailwindMerge.twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
|
|
866
862
|
const multilineLineCenterClasses = tailwindMerge.twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
|
|
867
|
-
const multilineLineLiftClasses = tailwindMerge.twJoin(multilineLineClasses, '
|
|
868
|
-
const multilineFillBaseClasses = tailwindMerge.twJoin(multilineBaseClasses, 'py-0.75
|
|
869
|
-
// Define theme-specific multiline fill color classes
|
|
863
|
+
const multilineLineLiftClasses = tailwindMerge.twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
|
|
864
|
+
const multilineFillBaseClasses = tailwindMerge.twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
|
|
870
865
|
const getMultilineFillColorClasses = (theme = 'blue') => {
|
|
871
866
|
switch (theme) {
|
|
872
867
|
case 'brown':
|
|
873
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown contrast-more:from-ui-brown contrast-more:to-ui-brown
|
|
868
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown transition-[background-size_color] contrast-more:from-ui-brown contrast-more:to-ui-brown');
|
|
874
869
|
case 'green':
|
|
875
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green contrast-more:from-ui-green contrast-more:to-ui-green
|
|
870
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green transition-[background-size_color] contrast-more:from-ui-green contrast-more:to-ui-green');
|
|
876
871
|
case 'grey':
|
|
877
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey contrast-more:from-ui-grey contrast-more:to-ui-grey
|
|
872
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey transition-[background-size_color] contrast-more:from-ui-grey contrast-more:to-ui-grey');
|
|
878
873
|
case 'sky-blue':
|
|
879
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-sky-blue to-ui-sky-blue contrast-more:from-ui-sky-blue contrast-more:to-ui-sky-blue
|
|
874
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-sky-blue to-ui-sky-blue transition-[background-size_color] contrast-more:from-ui-sky-blue contrast-more:to-ui-sky-blue');
|
|
880
875
|
case 'magenta':
|
|
881
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta contrast-more:from-ui-magenta contrast-more:to-ui-magenta
|
|
876
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta transition-[background-size_color] contrast-more:from-ui-magenta contrast-more:to-ui-magenta');
|
|
882
877
|
case 'neutral':
|
|
883
878
|
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-zinc-700 to-zinc-700 transition-[background-size_color] contrast-more:from-zinc-700 contrast-more:to-zinc-700 dark:from-zinc-300 dark:to-zinc-300 dark:contrast-more:from-zinc-300 dark:contrast-more:to-zinc-300');
|
|
884
879
|
case 'orange':
|
|
885
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange contrast-more:from-ui-orange contrast-more:to-ui-orange
|
|
880
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange transition-[background-size_color] contrast-more:from-ui-orange contrast-more:to-ui-orange');
|
|
886
881
|
case 'pink':
|
|
887
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink contrast-more:from-ui-pink contrast-more:to-ui-pink
|
|
888
|
-
case 'primary':
|
|
889
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-primary-500 to-primary-500 contrast-more:from-primary-500 contrast-more:to-primary-500 transition-[background-size_color]');
|
|
882
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink transition-[background-size_color] contrast-more:from-ui-pink contrast-more:to-ui-pink');
|
|
890
883
|
case 'purple':
|
|
891
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple contrast-more:from-ui-purple contrast-more:to-ui-purple
|
|
884
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple transition-[background-size_color] contrast-more:from-ui-purple contrast-more:to-ui-purple');
|
|
892
885
|
case 'red':
|
|
893
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red contrast-more:from-ui-red contrast-more:to-ui-red
|
|
886
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red transition-[background-size_color] contrast-more:from-ui-red contrast-more:to-ui-red');
|
|
894
887
|
case 'violet':
|
|
895
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet contrast-more:from-ui-violet contrast-more:to-ui-violet
|
|
888
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet transition-[background-size_color] contrast-more:from-ui-violet contrast-more:to-ui-violet');
|
|
896
889
|
case 'yellow':
|
|
897
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow contrast-more:from-ui-yellow contrast-more:to-ui-yellow
|
|
890
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow transition-[background-size_color] contrast-more:from-ui-yellow contrast-more:to-ui-yellow');
|
|
898
891
|
case 'blue':
|
|
899
892
|
default:
|
|
900
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue contrast-more:from-ui-blue contrast-more:to-ui-blue
|
|
893
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue transition-[background-size_color] contrast-more:from-ui-blue contrast-more:to-ui-blue');
|
|
901
894
|
}
|
|
902
895
|
};
|
|
903
896
|
// Define theme-specific multiline fill classes
|
|
904
897
|
const getMultilineFillClasses = (theme = 'blue') => {
|
|
905
898
|
switch (theme) {
|
|
906
899
|
case 'brown':
|
|
907
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-brown/0 to-ui-brown/0 focus-visible:from-ui-brown focus-visible:to-ui-brown active:from-ui-brown active:to-ui-brown contrast-more:from-ui-brown/0 contrast-more:to-ui-brown/0 focus-visible:contrast-more:from-ui-brown focus-visible:contrast-more:to-ui-brown active:contrast-more:from-ui-brown active:contrast-more:to-ui-brown pointer-fine:hover:from-ui-brown pointer-fine:hover:to-ui-brown pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-brown pointer-fine:hover:contrast-more:to-ui-brown
|
|
900
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-brown/0 to-ui-brown/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-brown focus-visible:to-ui-brown focus-visible:bg-[size:100%_100%] active:from-ui-brown active:to-ui-brown active:bg-[size:100%_100%] contrast-more:from-ui-brown/0 contrast-more:to-ui-brown/0 focus-visible:contrast-more:from-ui-brown focus-visible:contrast-more:to-ui-brown active:contrast-more:from-ui-brown active:contrast-more:to-ui-brown pointer-fine:hover:from-ui-brown pointer-fine:hover:to-ui-brown pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-brown pointer-fine:hover:contrast-more:to-ui-brown');
|
|
908
901
|
case 'green':
|
|
909
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-green/0 to-ui-green/0 focus-visible:from-ui-green focus-visible:to-ui-green active:from-ui-green active:to-ui-green contrast-more:from-ui-green/0 contrast-more:to-ui-green/0 focus-visible:contrast-more:from-ui-green focus-visible:contrast-more:to-ui-green active:contrast-more:from-ui-green active:contrast-more:to-ui-green pointer-fine:hover:from-ui-green pointer-fine:hover:to-ui-green pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-green pointer-fine:hover:contrast-more:to-ui-green
|
|
902
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-green/0 to-ui-green/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-green focus-visible:to-ui-green focus-visible:bg-[size:100%_100%] active:from-ui-green active:to-ui-green active:bg-[size:100%_100%] contrast-more:from-ui-green/0 contrast-more:to-ui-green/0 focus-visible:contrast-more:from-ui-green focus-visible:contrast-more:to-ui-green active:contrast-more:from-ui-green active:contrast-more:to-ui-green pointer-fine:hover:from-ui-green pointer-fine:hover:to-ui-green pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-green pointer-fine:hover:contrast-more:to-ui-green');
|
|
910
903
|
case 'grey':
|
|
911
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-grey/0 to-ui-grey/0 focus-visible:from-ui-grey focus-visible:to-ui-grey active:from-ui-grey active:to-ui-grey contrast-more:from-ui-grey/0 contrast-more:to-ui-grey/0 focus-visible:contrast-more:from-ui-grey focus-visible:contrast-more:to-ui-grey active:contrast-more:from-ui-grey active:contrast-more:to-ui-grey pointer-fine:hover:from-ui-grey pointer-fine:hover:to-ui-grey pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-grey pointer-fine:hover:contrast-more:to-ui-grey
|
|
904
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-grey/0 to-ui-grey/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-grey focus-visible:to-ui-grey focus-visible:bg-[size:100%_100%] active:from-ui-grey active:to-ui-grey active:bg-[size:100%_100%] contrast-more:from-ui-grey/0 contrast-more:to-ui-grey/0 focus-visible:contrast-more:from-ui-grey focus-visible:contrast-more:to-ui-grey active:contrast-more:from-ui-grey active:contrast-more:to-ui-grey pointer-fine:hover:from-ui-grey pointer-fine:hover:to-ui-grey pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-grey pointer-fine:hover:contrast-more:to-ui-grey');
|
|
912
905
|
case 'sky-blue':
|
|
913
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-sky-blue/0 to-ui-sky-blue/0 focus-visible:from-ui-sky-blue focus-visible:to-ui-sky-blue active:from-ui-sky-blue active:to-ui-sky-blue contrast-more:from-ui-sky-blue/0 contrast-more:to-ui-sky-blue/0 focus-visible:contrast-more:from-ui-sky-blue focus-visible:contrast-more:to-ui-sky-blue active:contrast-more:from-ui-sky-blue active:contrast-more:to-ui-sky-blue pointer-fine:hover:from-ui-sky-blue pointer-fine:hover:to-ui-sky-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-sky-blue pointer-fine:hover:contrast-more:to-ui-sky-blue
|
|
906
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-sky-blue/0 to-ui-sky-blue/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-sky-blue focus-visible:to-ui-sky-blue focus-visible:bg-[size:100%_100%] active:from-ui-sky-blue active:to-ui-sky-blue active:bg-[size:100%_100%] contrast-more:from-ui-sky-blue/0 contrast-more:to-ui-sky-blue/0 focus-visible:contrast-more:from-ui-sky-blue focus-visible:contrast-more:to-ui-sky-blue active:contrast-more:from-ui-sky-blue active:contrast-more:to-ui-sky-blue pointer-fine:hover:from-ui-sky-blue pointer-fine:hover:to-ui-sky-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-sky-blue pointer-fine:hover:contrast-more:to-ui-sky-blue');
|
|
914
907
|
case 'magenta':
|
|
915
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-magenta/0 to-ui-magenta/0 focus-visible:from-ui-magenta focus-visible:to-ui-magenta active:from-ui-magenta active:to-ui-magenta contrast-more:from-ui-magenta/0 contrast-more:to-ui-magenta/0 focus-visible:contrast-more:from-ui-magenta focus-visible:contrast-more:to-ui-magenta active:contrast-more:from-ui-magenta active:contrast-more:to-ui-magenta pointer-fine:hover:from-ui-magenta pointer-fine:hover:to-ui-magenta pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-magenta pointer-fine:hover:contrast-more:to-ui-magenta
|
|
908
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-magenta/0 to-ui-magenta/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-magenta focus-visible:to-ui-magenta focus-visible:bg-[size:100%_100%] active:from-ui-magenta active:to-ui-magenta active:bg-[size:100%_100%] contrast-more:from-ui-magenta/0 contrast-more:to-ui-magenta/0 focus-visible:contrast-more:from-ui-magenta focus-visible:contrast-more:to-ui-magenta active:contrast-more:from-ui-magenta active:contrast-more:to-ui-magenta pointer-fine:hover:from-ui-magenta pointer-fine:hover:to-ui-magenta pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-magenta pointer-fine:hover:contrast-more:to-ui-magenta');
|
|
916
909
|
case 'neutral':
|
|
917
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, '
|
|
910
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-zinc-700/0 to-zinc-700/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-zinc-700 focus-visible:to-zinc-700 focus-visible:bg-[size:100%_100%] active:from-zinc-700 active:to-zinc-700 active:bg-[size:100%_100%] contrast-more:from-zinc-700/0 contrast-more:to-zinc-700/0 focus-visible:contrast-more:from-zinc-700 focus-visible:contrast-more:to-zinc-700 active:contrast-more:from-zinc-700 active:contrast-more:to-zinc-700 dark:from-zinc-300/0 dark:to-zinc-300/0 dark:focus-visible:from-zinc-300 dark:focus-visible:to-zinc-300 dark:active:from-zinc-300 dark:active:to-zinc-300 dark:contrast-more:from-zinc-300/0 dark:contrast-more:to-zinc-300/0 dark:focus-visible:contrast-more:from-zinc-300 dark:focus-visible:contrast-more:to-zinc-300 dark:active:contrast-more:from-zinc-300 dark:active:contrast-more:to-zinc-300 pointer-fine:hover:from-zinc-700 pointer-fine:hover:to-zinc-700 pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-zinc-700 pointer-fine:hover:contrast-more:to-zinc-700 dark:pointer-fine:hover:from-zinc-300 dark:pointer-fine:hover:to-zinc-300 dark:pointer-fine:hover:contrast-more:from-zinc-300 dark:pointer-fine:hover:contrast-more:to-zinc-300');
|
|
918
911
|
case 'orange':
|
|
919
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-orange/0 to-ui-orange/0 focus-visible:from-ui-orange focus-visible:to-ui-orange active:from-ui-orange active:to-ui-orange contrast-more:from-ui-orange/0 contrast-more:to-ui-orange/0 focus-visible:contrast-more:from-ui-orange focus-visible:contrast-more:to-ui-orange active:contrast-more:from-ui-orange active:contrast-more:to-ui-orange pointer-fine:hover:from-ui-orange pointer-fine:hover:to-ui-orange pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-orange pointer-fine:hover:contrast-more:to-ui-orange
|
|
912
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-orange/0 to-ui-orange/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-orange focus-visible:to-ui-orange focus-visible:bg-[size:100%_100%] active:from-ui-orange active:to-ui-orange active:bg-[size:100%_100%] contrast-more:from-ui-orange/0 contrast-more:to-ui-orange/0 focus-visible:contrast-more:from-ui-orange focus-visible:contrast-more:to-ui-orange active:contrast-more:from-ui-orange active:contrast-more:to-ui-orange pointer-fine:hover:from-ui-orange pointer-fine:hover:to-ui-orange pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-orange pointer-fine:hover:contrast-more:to-ui-orange');
|
|
920
913
|
case 'pink':
|
|
921
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-pink/0 to-ui-pink/0 focus-visible:from-ui-pink focus-visible:to-ui-pink active:from-ui-pink active:to-ui-pink contrast-more:from-ui-pink/0 contrast-more:to-ui-pink/0 focus-visible:contrast-more:from-ui-pink focus-visible:contrast-more:to-ui-pink active:contrast-more:from-ui-pink active:contrast-more:to-ui-pink pointer-fine:hover:from-ui-pink pointer-fine:hover:to-ui-pink pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-pink pointer-fine:hover:contrast-more:to-ui-pink
|
|
922
|
-
case 'primary':
|
|
923
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-primary-500/0 to-primary-500/0 focus-visible:from-primary-500 focus-visible:to-primary-500 active:from-primary-500 active:to-primary-500 contrast-more:from-primary-500/0 contrast-more:to-primary-500/0 focus-visible:contrast-more:from-primary-500 focus-visible:contrast-more:to-primary-500 active:contrast-more:from-primary-500 active:contrast-more:to-primary-500 pointer-fine:hover:from-primary-500 pointer-fine:hover:to-primary-500 pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-primary-500 pointer-fine:hover:contrast-more:to-primary-500 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
|
|
914
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-pink/0 to-ui-pink/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-pink focus-visible:to-ui-pink focus-visible:bg-[size:100%_100%] active:from-ui-pink active:to-ui-pink active:bg-[size:100%_100%] contrast-more:from-ui-pink/0 contrast-more:to-ui-pink/0 focus-visible:contrast-more:from-ui-pink focus-visible:contrast-more:to-ui-pink active:contrast-more:from-ui-pink active:contrast-more:to-ui-pink pointer-fine:hover:from-ui-pink pointer-fine:hover:to-ui-pink pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-pink pointer-fine:hover:contrast-more:to-ui-pink');
|
|
924
915
|
case 'purple':
|
|
925
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-purple/0 to-ui-purple/0 focus-visible:from-ui-purple focus-visible:to-ui-purple active:from-ui-purple active:to-ui-purple contrast-more:from-ui-purple/0 contrast-more:to-ui-purple/0 focus-visible:contrast-more:from-ui-purple focus-visible:contrast-more:to-ui-purple active:contrast-more:from-ui-purple active:contrast-more:to-ui-purple pointer-fine:hover:from-ui-purple pointer-fine:hover:to-ui-purple pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-purple pointer-fine:hover:contrast-more:to-ui-purple
|
|
916
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-purple/0 to-ui-purple/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-purple focus-visible:to-ui-purple focus-visible:bg-[size:100%_100%] active:from-ui-purple active:to-ui-purple active:bg-[size:100%_100%] contrast-more:from-ui-purple/0 contrast-more:to-ui-purple/0 focus-visible:contrast-more:from-ui-purple focus-visible:contrast-more:to-ui-purple active:contrast-more:from-ui-purple active:contrast-more:to-ui-purple pointer-fine:hover:from-ui-purple pointer-fine:hover:to-ui-purple pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-purple pointer-fine:hover:contrast-more:to-ui-purple');
|
|
926
917
|
case 'red':
|
|
927
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-red/0 to-ui-red/0 focus-visible:from-ui-red focus-visible:to-ui-red active:from-ui-red active:to-ui-red contrast-more:from-ui-red/0 contrast-more:to-ui-red/0 focus-visible:contrast-more:from-ui-red focus-visible:contrast-more:to-ui-red active:contrast-more:from-ui-red active:contrast-more:to-ui-red pointer-fine:hover:from-ui-red pointer-fine:hover:to-ui-red pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-red pointer-fine:hover:contrast-more:to-ui-red
|
|
918
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-red/0 to-ui-red/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-red focus-visible:to-ui-red focus-visible:bg-[size:100%_100%] active:from-ui-red active:to-ui-red active:bg-[size:100%_100%] contrast-more:from-ui-red/0 contrast-more:to-ui-red/0 focus-visible:contrast-more:from-ui-red focus-visible:contrast-more:to-ui-red active:contrast-more:from-ui-red active:contrast-more:to-ui-red pointer-fine:hover:from-ui-red pointer-fine:hover:to-ui-red pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-red pointer-fine:hover:contrast-more:to-ui-red');
|
|
928
919
|
case 'violet':
|
|
929
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-violet/0 to-ui-violet/0 focus-visible:from-ui-violet focus-visible:to-ui-violet active:from-ui-violet active:to-ui-violet contrast-more:from-ui-violet/0 contrast-more:to-ui-violet/0 focus-visible:contrast-more:from-ui-violet focus-visible:contrast-more:to-ui-violet active:contrast-more:from-ui-violet active:contrast-more:to-ui-violet pointer-fine:hover:from-ui-violet pointer-fine:hover:to-ui-violet pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-violet pointer-fine:hover:contrast-more:to-ui-violet
|
|
920
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-violet/0 to-ui-violet/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-violet focus-visible:to-ui-violet focus-visible:bg-[size:100%_100%] active:from-ui-violet active:to-ui-violet active:bg-[size:100%_100%] contrast-more:from-ui-violet/0 contrast-more:to-ui-violet/0 focus-visible:contrast-more:from-ui-violet focus-visible:contrast-more:to-ui-violet active:contrast-more:from-ui-violet active:contrast-more:to-ui-violet pointer-fine:hover:from-ui-violet pointer-fine:hover:to-ui-violet pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-violet pointer-fine:hover:contrast-more:to-ui-violet');
|
|
930
921
|
case 'yellow':
|
|
931
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-yellow/0 to-ui-yellow/0 focus-visible:from-ui-yellow focus-visible:to-ui-yellow active:from-ui-yellow active:to-ui-yellow contrast-more:from-ui-yellow/0 contrast-more:to-ui-yellow/0 focus-visible:contrast-more:from-ui-yellow focus-visible:contrast-more:to-ui-yellow active:contrast-more:from-ui-yellow active:contrast-more:to-ui-yellow pointer-fine:hover:from-ui-yellow pointer-fine:hover:to-ui-yellow pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-yellow pointer-fine:hover:contrast-more:to-ui-yellow
|
|
922
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-yellow/0 to-ui-yellow/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-yellow focus-visible:to-ui-yellow focus-visible:bg-[size:100%_100%] active:from-ui-yellow active:to-ui-yellow active:bg-[size:100%_100%] contrast-more:from-ui-yellow/0 contrast-more:to-ui-yellow/0 focus-visible:contrast-more:from-ui-yellow focus-visible:contrast-more:to-ui-yellow active:contrast-more:from-ui-yellow active:contrast-more:to-ui-yellow pointer-fine:hover:from-ui-yellow pointer-fine:hover:to-ui-yellow pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-yellow pointer-fine:hover:contrast-more:to-ui-yellow');
|
|
932
923
|
case 'blue':
|
|
933
924
|
default:
|
|
934
|
-
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-blue/0 to-ui-blue/0 focus-visible:from-ui-blue focus-visible:to-ui-blue active:from-ui-blue active:to-ui-blue contrast-more:from-ui-blue/0 contrast-more:to-ui-blue/0 focus-visible:contrast-more:from-ui-blue focus-visible:contrast-more:to-ui-blue active:contrast-more:from-ui-blue active:contrast-more:to-ui-blue pointer-fine:hover:from-ui-blue pointer-fine:hover:to-ui-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-blue pointer-fine:hover:contrast-more:to-ui-blue
|
|
925
|
+
return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-blue/0 to-ui-blue/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-blue focus-visible:to-ui-blue focus-visible:bg-[size:100%_100%] active:from-ui-blue active:to-ui-blue active:bg-[size:100%_100%] contrast-more:from-ui-blue/0 contrast-more:to-ui-blue/0 focus-visible:contrast-more:from-ui-blue focus-visible:contrast-more:to-ui-blue active:contrast-more:from-ui-blue active:contrast-more:to-ui-blue pointer-fine:hover:from-ui-blue pointer-fine:hover:to-ui-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-blue pointer-fine:hover:contrast-more:to-ui-blue');
|
|
935
926
|
}
|
|
936
927
|
};
|
|
937
928
|
const getMultilineFillLiftClasses = (theme = 'blue') => {
|
|
938
|
-
return tailwindMerge.twJoin(getMultilineFillColorClasses(theme), '
|
|
929
|
+
return tailwindMerge.twJoin(getMultilineFillColorClasses(theme), 'bg-[size:auto_0px] bg-[position:50%_100%] focus-visible:bg-[size:auto_100%] active:bg-[size:auto_100%] pointer-fine:hover:bg-[size:auto_100%]');
|
|
939
930
|
};
|
|
940
931
|
const getMultilineFillXClasses = (theme = 'blue') => {
|
|
941
|
-
return tailwindMerge.twJoin(getMultilineFillColorClasses(theme), '
|
|
932
|
+
return tailwindMerge.twJoin(getMultilineFillColorClasses(theme), 'bg-[size:0%_100%] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%] pointer-fine:hover:bg-[size:100%_100%]');
|
|
942
933
|
};
|
|
943
934
|
const getMultilineFillRtlClasses = (theme = 'blue') => {
|
|
944
935
|
return tailwindMerge.twJoin(getMultilineFillXClasses(theme), 'bg-[position:100%_auto]');
|
|
@@ -975,7 +966,7 @@ const getMultilineFillCenterClasses = (theme = 'blue') => {
|
|
|
975
966
|
* @example
|
|
976
967
|
* <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
|
|
977
968
|
*/
|
|
978
|
-
function Link({
|
|
969
|
+
function Link({ as, className, ref, theme = 'blue', type, ...props }) {
|
|
979
970
|
const getLinkClasses = () => {
|
|
980
971
|
switch (type) {
|
|
981
972
|
case 'static':
|
|
@@ -1023,14 +1014,15 @@ function Link({ type, theme = 'blue', className, ref, ...props }) {
|
|
|
1023
1014
|
}
|
|
1024
1015
|
};
|
|
1025
1016
|
const linkClasses = getLinkClasses();
|
|
1026
|
-
|
|
1017
|
+
const LinkElement = as || Anchor;
|
|
1018
|
+
return jsxRuntime.jsx(LinkElement, { ...props, className: twMerge(linkClasses, className), ref: ref });
|
|
1027
1019
|
}
|
|
1028
1020
|
|
|
1029
1021
|
/**
|
|
1030
1022
|
* # Button
|
|
1031
1023
|
* - A pre-styled button with utility props for easy customization depending on use case.
|
|
1032
1024
|
*/
|
|
1033
|
-
function Button({ className, padding = 'md', rounded = 'lg', theme = '
|
|
1025
|
+
function Button({ className, padding = 'md', rounded = 'lg', theme = 'blue', ref, ...props }) {
|
|
1034
1026
|
const getPaddingClasses = () => {
|
|
1035
1027
|
switch (padding) {
|
|
1036
1028
|
case 'xs':
|
|
@@ -1062,71 +1054,92 @@ function Button({ className, padding = 'md', rounded = 'lg', theme = 'primary',
|
|
|
1062
1054
|
}
|
|
1063
1055
|
};
|
|
1064
1056
|
const getThemeClasses = () => {
|
|
1057
|
+
const classList = [];
|
|
1065
1058
|
switch (theme) {
|
|
1066
1059
|
case 'blue':
|
|
1067
|
-
|
|
1060
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-blue/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-blue before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1061
|
+
break;
|
|
1068
1062
|
case 'blue-gradient':
|
|
1069
|
-
|
|
1063
|
+
classList.push(twSort('bg-ui-blue text-white shadow-lg shadow-ui-blue/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1064
|
+
break;
|
|
1070
1065
|
case 'brown':
|
|
1071
|
-
|
|
1066
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-brown/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-brown before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1067
|
+
break;
|
|
1072
1068
|
case 'brown-gradient':
|
|
1073
|
-
|
|
1069
|
+
classList.push(twSort('bg-ui-brown text-white shadow-lg shadow-ui-brown/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1070
|
+
break;
|
|
1074
1071
|
case 'green':
|
|
1075
|
-
|
|
1072
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-green/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-green before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1073
|
+
break;
|
|
1076
1074
|
case 'green-gradient':
|
|
1077
|
-
|
|
1075
|
+
classList.push(twSort('bg-ui-green text-white shadow-lg shadow-ui-green/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1076
|
+
break;
|
|
1078
1077
|
case 'grey':
|
|
1079
|
-
|
|
1078
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-grey/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-grey before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1079
|
+
break;
|
|
1080
1080
|
case 'grey-gradient':
|
|
1081
|
-
|
|
1081
|
+
classList.push(twSort('bg-ui-grey text-white shadow-lg shadow-ui-grey/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1082
|
+
break;
|
|
1082
1083
|
case 'sky-blue':
|
|
1083
|
-
|
|
1084
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-sky-blue/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-sky-blue before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1085
|
+
break;
|
|
1084
1086
|
case 'sky-blue-gradient':
|
|
1085
|
-
|
|
1087
|
+
classList.push(twSort('bg-ui-sky-blue text-white shadow-lg shadow-ui-sky-blue/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1088
|
+
break;
|
|
1086
1089
|
case 'magenta':
|
|
1087
|
-
|
|
1090
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-magenta/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-magenta before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1091
|
+
break;
|
|
1088
1092
|
case 'magenta-gradient':
|
|
1089
|
-
|
|
1093
|
+
classList.push(twSort('bg-ui-magenta text-white shadow-lg shadow-ui-magenta/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1094
|
+
break;
|
|
1090
1095
|
case 'neutral':
|
|
1091
|
-
|
|
1096
|
+
classList.push(twSort('pointer-fine:active:before:brightness-90text-white dark bg-zinc-200 text-black before:absolute before:inset-0 before:rounded-[inherit] before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 dark:bg-zinc-800 pointer-fine:hover:before:brightness-110'));
|
|
1097
|
+
break;
|
|
1092
1098
|
case 'neutral-gradient':
|
|
1093
|
-
|
|
1099
|
+
classList.push(twSort('dark bg-linear-to-t from-zinc-300 via-zinc-200 to-zinc-100 text-black before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-700 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1100
|
+
break;
|
|
1094
1101
|
case 'orange':
|
|
1095
|
-
|
|
1102
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-orange/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-orange before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1103
|
+
break;
|
|
1096
1104
|
case 'orange-gradient':
|
|
1097
|
-
|
|
1105
|
+
classList.push(twSort('bg-ui-orange text-white shadow-lg shadow-ui-orange/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1106
|
+
break;
|
|
1098
1107
|
case 'pink':
|
|
1099
|
-
|
|
1108
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-pink/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-pink before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1109
|
+
break;
|
|
1100
1110
|
case 'pink-gradient':
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
return twSort('bg-primary-50 text-primary-600 active:bg-primary-600 active:text-primary-50 pointer-fine:hover:bg-primary-600 pointer-fine:hover:text-primary-50 pointer-fine:active:bg-primary-700 transition-[transform_background-color_color_box-shadow]');
|
|
1104
|
-
case 'primary-gradient':
|
|
1105
|
-
return twSort('bg-linear-to-t from-primary-700 via-primary-500 to-primary-300 bg-size-y-[200%] shadow-primary-600/25 pointer-fine:hover:[background-position:50%_0%] transition-[transform_background-position] [background-position:50%_50%] active:[background-position:50%_75%]');
|
|
1111
|
+
classList.push(twSort('before:to-white/75/75 bg-ui-pink text-white shadow-lg shadow-ui-pink/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1112
|
+
break;
|
|
1106
1113
|
case 'purple':
|
|
1107
|
-
|
|
1114
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-purple/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-purple before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1115
|
+
break;
|
|
1108
1116
|
case 'purple-gradient':
|
|
1109
|
-
|
|
1117
|
+
classList.push(twSort('bg-ui-purple text-white shadow-lg shadow-ui-purple/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1118
|
+
break;
|
|
1110
1119
|
case 'red':
|
|
1111
|
-
|
|
1120
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-red/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-red before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1121
|
+
break;
|
|
1112
1122
|
case 'red-gradient':
|
|
1113
|
-
|
|
1123
|
+
classList.push(twSort('bg-ui-red text-white shadow-lg shadow-ui-red/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1124
|
+
break;
|
|
1114
1125
|
case 'violet':
|
|
1115
|
-
|
|
1126
|
+
classList.push(twSort('text-white shadow-lg shadow-ui-violet/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-violet before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1127
|
+
break;
|
|
1116
1128
|
case 'violet-gradient':
|
|
1117
|
-
|
|
1129
|
+
classList.push(twSort('bg-ui-violet text-white shadow-lg shadow-ui-violet/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1130
|
+
break;
|
|
1118
1131
|
case 'yellow':
|
|
1119
|
-
|
|
1132
|
+
classList.push(twSort('text-black shadow-lg shadow-ui-yellow/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-yellow before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1133
|
+
break;
|
|
1120
1134
|
case 'yellow-gradient':
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
default:
|
|
1124
|
-
return twSort('bg-primary-500 shadow-primary-700/25 active:bg-primary-600 pointer-fine:hover:bg-primary-400 pointer-fine:active:bg-primary-600 text-white shadow-lg transition-[transform_background-color_box-shadow]');
|
|
1135
|
+
classList.push(twSort('bg-ui-yellow text-black shadow-lg shadow-ui-yellow/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black before:via-black/50 before:to-white/50 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
|
|
1136
|
+
break;
|
|
1125
1137
|
}
|
|
1138
|
+
return classList.join(' ');
|
|
1126
1139
|
};
|
|
1127
1140
|
const paddingClasses = getPaddingClasses(), roundedClasses = getRoundedClasses(), themeClasses = getThemeClasses();
|
|
1128
1141
|
const buttonClasses = twMerge([
|
|
1129
|
-
'ease-exponential focus-visible:scale-101 pointer-fine:hover:scale-101 pointer-fine:active:scale-99
|
|
1142
|
+
'block w-fit min-w-fit text-center font-semibold duration-300 ease-exponential focus-visible:scale-101 active:scale-95 pointer-fine:hover:scale-101 pointer-fine:active:scale-99',
|
|
1130
1143
|
paddingClasses,
|
|
1131
1144
|
roundedClasses,
|
|
1132
1145
|
themeClasses,
|
|
@@ -1203,7 +1216,7 @@ function useFormStatus() {
|
|
|
1203
1216
|
return useStore(store => store);
|
|
1204
1217
|
}
|
|
1205
1218
|
|
|
1206
|
-
function validateField(value, { required, type }) {
|
|
1219
|
+
function validateField$1(value, { required, type }) {
|
|
1207
1220
|
const noValue = !value || value === '';
|
|
1208
1221
|
if (!required && noValue)
|
|
1209
1222
|
return true;
|
|
@@ -1220,8 +1233,8 @@ function validateField(value, { required, type }) {
|
|
|
1220
1233
|
return true;
|
|
1221
1234
|
}
|
|
1222
1235
|
}
|
|
1223
|
-
function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onChange, placeholder, ref, required = true, type, value, ...props }) {
|
|
1224
|
-
const [formContext, setFormContext] = useFormContext()
|
|
1236
|
+
function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, type, value, ...props }) {
|
|
1237
|
+
const [formContext, setFormContext] = useFormContext();
|
|
1225
1238
|
if (placeholder === '*')
|
|
1226
1239
|
placeholder = name + (required && !label ? '*' : '');
|
|
1227
1240
|
if (label === '*')
|
|
@@ -1246,7 +1259,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1246
1259
|
}
|
|
1247
1260
|
};
|
|
1248
1261
|
const fieldContextType = getFieldContextType();
|
|
1249
|
-
const
|
|
1262
|
+
const initialFieldContext = defineField({
|
|
1250
1263
|
type: fieldContextType,
|
|
1251
1264
|
id: fieldContextID,
|
|
1252
1265
|
invalid,
|
|
@@ -1258,13 +1271,14 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1258
1271
|
if (!setFormContext)
|
|
1259
1272
|
return;
|
|
1260
1273
|
setFormContext(prevContext => {
|
|
1261
|
-
const otherFields = (prevContext || []).filter(field => field.id !==
|
|
1262
|
-
return [...otherFields,
|
|
1274
|
+
const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
|
|
1275
|
+
return [...otherFields, initialFieldContext];
|
|
1263
1276
|
});
|
|
1264
1277
|
return () => {
|
|
1265
|
-
setFormContext(prevContext => (prevContext || []).filter(field => field.id !==
|
|
1278
|
+
setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
|
|
1266
1279
|
};
|
|
1267
1280
|
}, [setFormContext]);
|
|
1281
|
+
const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
|
|
1268
1282
|
const debounceTimerRef = react.useRef(undefined);
|
|
1269
1283
|
const handleChange = e => {
|
|
1270
1284
|
if (disabled) {
|
|
@@ -1276,32 +1290,66 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1276
1290
|
setFormContext?.(prevContext => {
|
|
1277
1291
|
if (!prevContext)
|
|
1278
1292
|
return [];
|
|
1279
|
-
const field = prevContext.find(({ id: fieldID }) => fieldID ===
|
|
1293
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1280
1294
|
if (!field)
|
|
1281
|
-
throw new Error(`Field with id "${
|
|
1282
|
-
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !==
|
|
1295
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1296
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1283
1297
|
const updatedField = { ...field, value: newValue };
|
|
1284
1298
|
return [...otherFields, updatedField];
|
|
1285
1299
|
});
|
|
1286
1300
|
debounceTimerRef.current = setTimeout(() => {
|
|
1287
|
-
const field = formContext?.find(({ id: fieldID }) => fieldID ===
|
|
1301
|
+
const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1288
1302
|
if (!field)
|
|
1289
1303
|
return;
|
|
1290
|
-
const invalid = validateField(newValue, field) === false;
|
|
1304
|
+
const invalid = validateField$1(newValue, field) === false;
|
|
1291
1305
|
if (invalid !== field.invalid)
|
|
1292
1306
|
setFormContext?.(prevContext => {
|
|
1293
1307
|
if (!prevContext)
|
|
1294
1308
|
return [];
|
|
1295
|
-
const field = prevContext.find(({ id: fieldID }) => fieldID ===
|
|
1309
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1296
1310
|
if (!field)
|
|
1297
|
-
throw new Error(`Field with id "${
|
|
1298
|
-
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !==
|
|
1311
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1312
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1299
1313
|
const updatedField = { ...field, invalid };
|
|
1300
1314
|
return [...otherFields, updatedField];
|
|
1301
1315
|
});
|
|
1302
1316
|
}, 500);
|
|
1303
1317
|
onChange?.(e);
|
|
1304
1318
|
};
|
|
1319
|
+
const handleBlur = e => {
|
|
1320
|
+
if (disabled) {
|
|
1321
|
+
e.preventDefault();
|
|
1322
|
+
return;
|
|
1323
|
+
}
|
|
1324
|
+
const { currentTarget } = e, { value: newValue } = currentTarget;
|
|
1325
|
+
switch (type) {
|
|
1326
|
+
case 'email':
|
|
1327
|
+
setFormContext?.(prevContext => {
|
|
1328
|
+
if (!prevContext)
|
|
1329
|
+
return [];
|
|
1330
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1331
|
+
if (!field)
|
|
1332
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1333
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1334
|
+
const updatedField = { ...field, value: newValue.toLowerCase() };
|
|
1335
|
+
return [...otherFields, updatedField];
|
|
1336
|
+
});
|
|
1337
|
+
break;
|
|
1338
|
+
case 'tel':
|
|
1339
|
+
setFormContext?.(prevContext => {
|
|
1340
|
+
if (!prevContext)
|
|
1341
|
+
return [];
|
|
1342
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1343
|
+
if (!field)
|
|
1344
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1345
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1346
|
+
const updatedField = { ...field, value: formatPhoneNumber(newValue, '1') };
|
|
1347
|
+
return [...otherFields, updatedField];
|
|
1348
|
+
});
|
|
1349
|
+
break;
|
|
1350
|
+
}
|
|
1351
|
+
onBlur?.(e);
|
|
1352
|
+
};
|
|
1305
1353
|
const restFieldProps = fieldProps
|
|
1306
1354
|
? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
|
|
1307
1355
|
: {};
|
|
@@ -1311,25 +1359,25 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1311
1359
|
const restDescriptionProps = descriptionProps
|
|
1312
1360
|
? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
|
|
1313
1361
|
: {};
|
|
1314
|
-
return (jsxRuntime.jsxs(react$1.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react$1.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsx(react$1.Input, { ...props, className: bag => twMerge(
|
|
1362
|
+
return (jsxRuntime.jsxs(react$1.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react$1.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsx(react$1.Input, { ...props, className: bag => twMerge(
|
|
1363
|
+
// Base styles
|
|
1364
|
+
'rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50',
|
|
1365
|
+
// Pseudo styles
|
|
1366
|
+
'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800',
|
|
1367
|
+
// user-invalid styles
|
|
1368
|
+
'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]',
|
|
1369
|
+
// Custom styles
|
|
1370
|
+
typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value }), description && (jsxRuntime.jsx(react$1.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
|
|
1315
1371
|
? descriptionProps?.className(bag)
|
|
1316
1372
|
: descriptionProps?.className), children: description }))] }));
|
|
1317
1373
|
}
|
|
1318
1374
|
|
|
1319
|
-
function SubmitButton({ children, className,
|
|
1375
|
+
function SubmitButton({ children, className, error, incomplete, loading, success, theme, type = 'submit', ref, ...props }) {
|
|
1320
1376
|
const [formStatus] = useFormStatus();
|
|
1321
|
-
const getDisabledStatus = () => {
|
|
1322
|
-
if (ariaDisabled !== undefined)
|
|
1323
|
-
return ariaDisabled;
|
|
1324
|
-
if (formStatus !== 'ready')
|
|
1325
|
-
return 'true';
|
|
1326
|
-
return 'false';
|
|
1327
|
-
};
|
|
1328
|
-
const disabled = getDisabledStatus();
|
|
1329
1377
|
const getFormStatusButtonClasses = () => {
|
|
1330
1378
|
switch (formStatus) {
|
|
1331
1379
|
case 'loading':
|
|
1332
|
-
return twSort('animate-pulse cursor-wait text-lg font-black
|
|
1380
|
+
return twSort('animate-pulse cursor-wait text-lg leading-6 font-black tracking-widest');
|
|
1333
1381
|
case 'error':
|
|
1334
1382
|
case 'success':
|
|
1335
1383
|
return 'cursor-not-allowed';
|
|
@@ -1358,7 +1406,7 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
|
|
|
1358
1406
|
case 'incomplete':
|
|
1359
1407
|
return incomplete || 'Complete Form';
|
|
1360
1408
|
case 'loading':
|
|
1361
|
-
return (loading || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: 'animate-wave animation-delay-300
|
|
1409
|
+
return (loading || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: 'inline-block animate-wave animation-delay-300', children: "\u2022" }), jsxRuntime.jsx("span", { className: 'inline-block animate-wave animation-delay-150', children: "\u2022" }), jsxRuntime.jsx("span", { className: 'inline-block animate-wave', children: "\u2022" })] })));
|
|
1362
1410
|
case 'error':
|
|
1363
1411
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error || 'Error', ' ', jsxRuntime.jsx("span", { className: 'absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl', children: "\u00D7" })] }));
|
|
1364
1412
|
case 'success':
|
|
@@ -1368,7 +1416,103 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
|
|
|
1368
1416
|
}
|
|
1369
1417
|
};
|
|
1370
1418
|
const buttonText = getButtonText();
|
|
1371
|
-
return (jsxRuntime.jsx(Button, { ...props,
|
|
1419
|
+
return (jsxRuntime.jsx(Button, { ...props, className: twMerge([formStatusButtonClasses, 'w-full', className]), ref: ref, theme: formStatusButtonTheme, type: type, children: buttonText }));
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
function validateField(value, { required }) {
|
|
1423
|
+
const noValue = !value || value === '';
|
|
1424
|
+
if (!required && noValue)
|
|
1425
|
+
return true;
|
|
1426
|
+
if (noValue)
|
|
1427
|
+
return false;
|
|
1428
|
+
return true;
|
|
1429
|
+
}
|
|
1430
|
+
function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, value, ...props }) {
|
|
1431
|
+
const [formContext, setFormContext] = useFormContext();
|
|
1432
|
+
if (placeholder === '*')
|
|
1433
|
+
placeholder = name + (required && !label ? '*' : '');
|
|
1434
|
+
if (label === '*')
|
|
1435
|
+
label = name;
|
|
1436
|
+
const uniqueID = react.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
|
|
1437
|
+
if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
|
|
1438
|
+
invalid = true;
|
|
1439
|
+
const initialFieldContext = defineField({
|
|
1440
|
+
type: 'textarea',
|
|
1441
|
+
id: fieldContextID,
|
|
1442
|
+
invalid,
|
|
1443
|
+
name,
|
|
1444
|
+
required,
|
|
1445
|
+
value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
|
|
1446
|
+
});
|
|
1447
|
+
react.useEffect(() => {
|
|
1448
|
+
if (!setFormContext)
|
|
1449
|
+
return;
|
|
1450
|
+
setFormContext(prevContext => {
|
|
1451
|
+
const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
|
|
1452
|
+
return [...otherFields, initialFieldContext];
|
|
1453
|
+
});
|
|
1454
|
+
return () => {
|
|
1455
|
+
setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
|
|
1456
|
+
};
|
|
1457
|
+
}, [setFormContext]);
|
|
1458
|
+
const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
|
|
1459
|
+
const debounceTimerRef = react.useRef(undefined);
|
|
1460
|
+
const handleChange = e => {
|
|
1461
|
+
if (disabled) {
|
|
1462
|
+
e.preventDefault();
|
|
1463
|
+
return;
|
|
1464
|
+
}
|
|
1465
|
+
clearTimeout(debounceTimerRef.current);
|
|
1466
|
+
const { currentTarget } = e, { value: newValue } = currentTarget;
|
|
1467
|
+
setFormContext?.(prevContext => {
|
|
1468
|
+
if (!prevContext)
|
|
1469
|
+
return [];
|
|
1470
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1471
|
+
if (!field)
|
|
1472
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1473
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1474
|
+
const updatedField = { ...field, value: newValue };
|
|
1475
|
+
return [...otherFields, updatedField];
|
|
1476
|
+
});
|
|
1477
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
1478
|
+
const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1479
|
+
if (!field)
|
|
1480
|
+
return;
|
|
1481
|
+
const invalid = validateField(newValue, field) === false;
|
|
1482
|
+
if (invalid !== field.invalid)
|
|
1483
|
+
setFormContext?.(prevContext => {
|
|
1484
|
+
if (!prevContext)
|
|
1485
|
+
return [];
|
|
1486
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1487
|
+
if (!field)
|
|
1488
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1489
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1490
|
+
const updatedField = { ...field, invalid };
|
|
1491
|
+
return [...otherFields, updatedField];
|
|
1492
|
+
});
|
|
1493
|
+
}, 500);
|
|
1494
|
+
onChange?.(e);
|
|
1495
|
+
};
|
|
1496
|
+
const restFieldProps = fieldProps
|
|
1497
|
+
? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
|
|
1498
|
+
: {};
|
|
1499
|
+
const restLabelProps = labelProps
|
|
1500
|
+
? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
|
|
1501
|
+
: {};
|
|
1502
|
+
const restDescriptionProps = descriptionProps
|
|
1503
|
+
? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
|
|
1504
|
+
: {};
|
|
1505
|
+
return (jsxRuntime.jsxs(react$1.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react$1.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsx(react$1.Textarea, { ...props, className: bag => twMerge(
|
|
1506
|
+
// Base styles
|
|
1507
|
+
'field-sizing-content resize-none rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50',
|
|
1508
|
+
// Pseudo styles
|
|
1509
|
+
'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800',
|
|
1510
|
+
// user-invalid styles
|
|
1511
|
+
'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]',
|
|
1512
|
+
// Custom styles
|
|
1513
|
+
typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value }), description && (jsxRuntime.jsx(react$1.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
|
|
1514
|
+
? descriptionProps?.className(bag)
|
|
1515
|
+
: descriptionProps?.className), children: description }))] }));
|
|
1372
1516
|
}
|
|
1373
1517
|
|
|
1374
1518
|
// import { findComponentByType } from '../../utils'
|
|
@@ -1428,23 +1572,23 @@ function getTextFromChildren(children) {
|
|
|
1428
1572
|
* A heading component that renders HTML heading elements (h1-h6) with appropriate styling.
|
|
1429
1573
|
* Automatically generates an ID for the heading based on its content if none is provided.
|
|
1430
1574
|
*/
|
|
1431
|
-
function Heading({ as = 'h2', children, className, id, ref, ...props }) {
|
|
1575
|
+
function Heading({ as = 'h2', children, customize, className, id, ref, ...props }) {
|
|
1432
1576
|
const H = as;
|
|
1433
1577
|
const targetableID = id || getTextFromChildren(children).replace(/\s+/g, '-').toLowerCase();
|
|
1434
1578
|
const getBaseClasses = () => {
|
|
1435
1579
|
switch (as) {
|
|
1436
1580
|
case 'h1':
|
|
1437
|
-
return twSort('pb-2.5 text-6xl font-black last:pb-0');
|
|
1581
|
+
return customize?.h1 || twSort('pb-2.5 text-6xl font-black last:pb-0');
|
|
1438
1582
|
case 'h3':
|
|
1439
|
-
return twSort('pb-2 text-4xl font-extralight last:pb-0');
|
|
1583
|
+
return customize?.h3 || twSort('pb-2 text-4xl font-extralight last:pb-0');
|
|
1440
1584
|
case 'h4':
|
|
1441
|
-
return twSort('pb-2 text-3xl font-extrabold last:pb-0');
|
|
1585
|
+
return customize?.h4 || twSort('pb-2 text-3xl font-extrabold last:pb-0');
|
|
1442
1586
|
case 'h5':
|
|
1443
|
-
return twSort('pb-1.5 text-2xl font-semibold last:pb-0');
|
|
1587
|
+
return customize?.h5 || twSort('pb-1.5 text-2xl font-semibold last:pb-0');
|
|
1444
1588
|
case 'h6':
|
|
1445
|
-
return twSort('pb-1 text-xl font-bold last:pb-0');
|
|
1589
|
+
return customize?.h6 || twSort('pb-1 text-xl font-bold last:pb-0');
|
|
1446
1590
|
default:
|
|
1447
|
-
return twSort('pb-2.5 text-5xl font-medium last:pb-0');
|
|
1591
|
+
return customize?.h2 || twSort('pb-2.5 text-5xl font-medium last:pb-0');
|
|
1448
1592
|
}
|
|
1449
1593
|
};
|
|
1450
1594
|
const baseClasses = getBaseClasses();
|
|
@@ -2141,6 +2285,7 @@ exports.SquareAndPencil = SquareAndPencil;
|
|
|
2141
2285
|
exports.SquareAndPencilFill = SquareAndPencilFill;
|
|
2142
2286
|
exports.SubmitButton = SubmitButton;
|
|
2143
2287
|
exports.TextBubble = TextBubble;
|
|
2288
|
+
exports.Textarea = Textarea;
|
|
2144
2289
|
exports.ThreePeople = ThreePeople;
|
|
2145
2290
|
exports.ThreeRectanglesDesktop = ThreeRectanglesDesktop;
|
|
2146
2291
|
exports.ThreeRectanglesDesktopFill = ThreeRectanglesDesktopFill;
|