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.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
2
2
|
import { extendTailwindMerge, twJoin } from 'tailwind-merge';
|
|
3
3
|
import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, Suspense, useId, useEffect, useState, cloneElement } from 'react';
|
|
4
|
-
import { Button as Button$1, Field, Label, Input as Input$1, Description, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
|
|
4
|
+
import { Button as Button$1, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -767,15 +767,15 @@ function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props
|
|
|
767
767
|
: 'prefetch' }));
|
|
768
768
|
}
|
|
769
769
|
// * Styles
|
|
770
|
-
const baseClasses = twSort('
|
|
771
|
-
const lineStaticClasses = twJoin(baseClasses, '
|
|
772
|
-
const lineClasses = twJoin(lineStaticClasses, '
|
|
770
|
+
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');
|
|
771
|
+
const lineStaticClasses = twJoin(baseClasses, 'whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current');
|
|
772
|
+
const lineClasses = twJoin(lineStaticClasses, 'whitespace-nowrap transition-transform after:transition-transform after:ease-exponential');
|
|
773
773
|
const scaleXClasses = 'after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100';
|
|
774
774
|
const scaleYClasses = 'after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100';
|
|
775
775
|
const lineNormalClasses = twJoin([
|
|
776
776
|
lineClasses,
|
|
777
777
|
scaleYClasses,
|
|
778
|
-
'
|
|
778
|
+
'after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0',
|
|
779
779
|
]);
|
|
780
780
|
const lineLtrClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
|
|
781
781
|
const lineRtlClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
|
|
@@ -783,160 +783,151 @@ const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
|
|
|
783
783
|
const lineLiftClasses = twJoin([
|
|
784
784
|
lineClasses,
|
|
785
785
|
scaleYClasses,
|
|
786
|
-
'
|
|
786
|
+
'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',
|
|
787
787
|
]);
|
|
788
|
-
const fillClasses = twJoin(baseClasses, '
|
|
788
|
+
const fillClasses = 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');
|
|
789
789
|
// Define theme-specific fill color transition classes
|
|
790
790
|
const getFillColorTransitionClasses = (theme = 'blue') => {
|
|
791
791
|
switch (theme) {
|
|
792
792
|
case 'brown':
|
|
793
|
-
return twJoin(fillClasses, 'after:bg-ui-brown contrast-more:after:bg-ui-brown
|
|
793
|
+
return twJoin(fillClasses, 'after:bg-ui-brown after:transition-transform contrast-more:after:bg-ui-brown');
|
|
794
794
|
case 'green':
|
|
795
|
-
return twJoin(fillClasses, 'after:bg-ui-green contrast-more:after:bg-ui-green
|
|
795
|
+
return twJoin(fillClasses, 'after:bg-ui-green after:transition-transform contrast-more:after:bg-ui-green');
|
|
796
796
|
case 'grey':
|
|
797
|
-
return twJoin(fillClasses, 'after:bg-ui-grey contrast-more:after:bg-ui-grey
|
|
797
|
+
return twJoin(fillClasses, 'after:bg-ui-grey after:transition-transform contrast-more:after:bg-ui-grey');
|
|
798
798
|
case 'sky-blue':
|
|
799
|
-
return twJoin(fillClasses, 'after:bg-ui-sky-blue contrast-more:after:bg-ui-sky-blue
|
|
799
|
+
return twJoin(fillClasses, 'after:bg-ui-sky-blue after:transition-transform contrast-more:after:bg-ui-sky-blue');
|
|
800
800
|
case 'magenta':
|
|
801
|
-
return twJoin(fillClasses, 'after:bg-ui-magenta contrast-more:after:bg-ui-magenta
|
|
801
|
+
return twJoin(fillClasses, 'after:bg-ui-magenta after:transition-transform contrast-more:after:bg-ui-magenta');
|
|
802
802
|
case 'neutral':
|
|
803
803
|
return 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');
|
|
804
804
|
case 'orange':
|
|
805
|
-
return twJoin(fillClasses, 'after:bg-ui-orange contrast-more:after:bg-ui-orange
|
|
805
|
+
return twJoin(fillClasses, 'after:bg-ui-orange after:transition-transform contrast-more:after:bg-ui-orange');
|
|
806
806
|
case 'pink':
|
|
807
|
-
return twJoin(fillClasses, 'after:bg-ui-pink contrast-more:after:bg-ui-pink
|
|
808
|
-
case 'primary':
|
|
809
|
-
return twJoin(fillClasses, 'after:bg-primary-500 contrast-more:after:bg-primary-500 after:transition-transform');
|
|
807
|
+
return twJoin(fillClasses, 'after:bg-ui-pink after:transition-transform contrast-more:after:bg-ui-pink');
|
|
810
808
|
case 'purple':
|
|
811
|
-
return twJoin(fillClasses, 'after:bg-ui-purple contrast-more:after:bg-ui-purple
|
|
809
|
+
return twJoin(fillClasses, 'after:bg-ui-purple after:transition-transform contrast-more:after:bg-ui-purple');
|
|
812
810
|
case 'red':
|
|
813
|
-
return twJoin(fillClasses, 'after:bg-ui-red contrast-more:after:bg-ui-red
|
|
811
|
+
return twJoin(fillClasses, 'after:bg-ui-red after:transition-transform contrast-more:after:bg-ui-red');
|
|
814
812
|
case 'violet':
|
|
815
|
-
return twJoin(fillClasses, 'after:bg-ui-violet contrast-more:after:bg-ui-violet
|
|
813
|
+
return twJoin(fillClasses, 'after:bg-ui-violet after:transition-transform contrast-more:after:bg-ui-violet');
|
|
816
814
|
case 'yellow':
|
|
817
|
-
return twJoin(fillClasses, 'after:bg-ui-yellow contrast-more:after:bg-ui-yellow
|
|
815
|
+
return twJoin(fillClasses, 'after:bg-ui-yellow after:transition-transform contrast-more:after:bg-ui-yellow');
|
|
818
816
|
case 'blue':
|
|
819
817
|
default:
|
|
820
|
-
return twJoin(fillClasses, 'after:bg-ui-blue contrast-more:after:bg-ui-blue
|
|
818
|
+
return twJoin(fillClasses, 'after:bg-ui-blue after:transition-transform contrast-more:after:bg-ui-blue');
|
|
821
819
|
}
|
|
822
820
|
};
|
|
823
821
|
// Define theme-specific fill center classes
|
|
824
822
|
const getFillCenterClasses = (theme = 'blue') => {
|
|
825
823
|
switch (theme) {
|
|
826
824
|
case 'brown':
|
|
827
|
-
return twJoin(fillClasses, 'after:bg-ui-brown/0
|
|
825
|
+
return 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');
|
|
828
826
|
case 'green':
|
|
829
|
-
return twJoin(fillClasses, 'after:bg-ui-green/0
|
|
827
|
+
return 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');
|
|
830
828
|
case 'grey':
|
|
831
|
-
return twJoin(fillClasses, 'after:bg-ui-grey/0
|
|
829
|
+
return 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');
|
|
832
830
|
case 'sky-blue':
|
|
833
|
-
return twJoin(fillClasses, 'after:
|
|
831
|
+
return 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');
|
|
834
832
|
case 'magenta':
|
|
835
|
-
return twJoin(fillClasses, 'after:bg-ui-magenta/0
|
|
833
|
+
return 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');
|
|
836
834
|
case 'neutral':
|
|
837
|
-
return twJoin(fillClasses, '
|
|
835
|
+
return 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');
|
|
838
836
|
case 'orange':
|
|
839
|
-
return twJoin(fillClasses, 'after:bg-ui-orange/0
|
|
837
|
+
return 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');
|
|
840
838
|
case 'pink':
|
|
841
|
-
return twJoin(fillClasses, 'after:bg-ui-pink/0
|
|
842
|
-
case 'primary':
|
|
843
|
-
return 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');
|
|
839
|
+
return 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');
|
|
844
840
|
case 'purple':
|
|
845
|
-
return twJoin(fillClasses, 'after:bg-ui-purple/0
|
|
841
|
+
return 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');
|
|
846
842
|
case 'red':
|
|
847
|
-
return twJoin(fillClasses, 'after:bg-ui-red/0
|
|
843
|
+
return 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');
|
|
848
844
|
case 'violet':
|
|
849
|
-
return twJoin(fillClasses, 'after:bg-ui-violet/0
|
|
845
|
+
return 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');
|
|
850
846
|
case 'yellow':
|
|
851
|
-
return twJoin(fillClasses, 'after:bg-ui-yellow/0
|
|
847
|
+
return 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');
|
|
852
848
|
case 'blue':
|
|
853
849
|
default:
|
|
854
|
-
return twJoin(fillClasses, 'after:bg-ui-blue/0
|
|
850
|
+
return 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');
|
|
855
851
|
}
|
|
856
852
|
};
|
|
857
853
|
const multilineBaseClasses = twSort('bg-linear-to-r from-current to-current bg-no-repeat active:scale-95');
|
|
858
854
|
const multilineLineStaticClasses = 'underline';
|
|
859
|
-
const multilineNormalClasses = twSort('
|
|
860
|
-
const multilineClasses = twJoin(multilineBaseClasses, 'ease-exponential
|
|
855
|
+
const multilineNormalClasses = twSort('underline-offset-1 active:underline pointer-fine:hover:underline');
|
|
856
|
+
const multilineClasses = twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
|
|
861
857
|
const multilineLineClasses = twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
|
|
862
|
-
const multilineXClasses = twJoin(multilineLineClasses, '
|
|
858
|
+
const multilineXClasses = twJoin(multilineLineClasses, 'bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]');
|
|
863
859
|
const multilineLineRtlClasses = twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
|
|
864
860
|
const multilineLineCenterClasses = twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
|
|
865
|
-
const multilineLineLiftClasses = twJoin(multilineLineClasses, '
|
|
866
|
-
const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'py-0.75
|
|
867
|
-
// Define theme-specific multiline fill color classes
|
|
861
|
+
const multilineLineLiftClasses = twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
|
|
862
|
+
const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
|
|
868
863
|
const getMultilineFillColorClasses = (theme = 'blue') => {
|
|
869
864
|
switch (theme) {
|
|
870
865
|
case 'brown':
|
|
871
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown contrast-more:from-ui-brown contrast-more:to-ui-brown
|
|
866
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown transition-[background-size_color] contrast-more:from-ui-brown contrast-more:to-ui-brown');
|
|
872
867
|
case 'green':
|
|
873
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green contrast-more:from-ui-green contrast-more:to-ui-green
|
|
868
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green transition-[background-size_color] contrast-more:from-ui-green contrast-more:to-ui-green');
|
|
874
869
|
case 'grey':
|
|
875
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey contrast-more:from-ui-grey contrast-more:to-ui-grey
|
|
870
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey transition-[background-size_color] contrast-more:from-ui-grey contrast-more:to-ui-grey');
|
|
876
871
|
case 'sky-blue':
|
|
877
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue to-ui-sky-blue contrast-more:from-ui-sky-blue contrast-more:to-ui-sky-blue
|
|
872
|
+
return 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');
|
|
878
873
|
case 'magenta':
|
|
879
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta contrast-more:from-ui-magenta contrast-more:to-ui-magenta
|
|
874
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta transition-[background-size_color] contrast-more:from-ui-magenta contrast-more:to-ui-magenta');
|
|
880
875
|
case 'neutral':
|
|
881
876
|
return 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');
|
|
882
877
|
case 'orange':
|
|
883
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange contrast-more:from-ui-orange contrast-more:to-ui-orange
|
|
878
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange transition-[background-size_color] contrast-more:from-ui-orange contrast-more:to-ui-orange');
|
|
884
879
|
case 'pink':
|
|
885
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink contrast-more:from-ui-pink contrast-more:to-ui-pink
|
|
886
|
-
case 'primary':
|
|
887
|
-
return twJoin(multilineFillBaseClasses, 'from-primary-500 to-primary-500 contrast-more:from-primary-500 contrast-more:to-primary-500 transition-[background-size_color]');
|
|
880
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink transition-[background-size_color] contrast-more:from-ui-pink contrast-more:to-ui-pink');
|
|
888
881
|
case 'purple':
|
|
889
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple contrast-more:from-ui-purple contrast-more:to-ui-purple
|
|
882
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple transition-[background-size_color] contrast-more:from-ui-purple contrast-more:to-ui-purple');
|
|
890
883
|
case 'red':
|
|
891
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red contrast-more:from-ui-red contrast-more:to-ui-red
|
|
884
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red transition-[background-size_color] contrast-more:from-ui-red contrast-more:to-ui-red');
|
|
892
885
|
case 'violet':
|
|
893
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet contrast-more:from-ui-violet contrast-more:to-ui-violet
|
|
886
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet transition-[background-size_color] contrast-more:from-ui-violet contrast-more:to-ui-violet');
|
|
894
887
|
case 'yellow':
|
|
895
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow contrast-more:from-ui-yellow contrast-more:to-ui-yellow
|
|
888
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow transition-[background-size_color] contrast-more:from-ui-yellow contrast-more:to-ui-yellow');
|
|
896
889
|
case 'blue':
|
|
897
890
|
default:
|
|
898
|
-
return twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue contrast-more:from-ui-blue contrast-more:to-ui-blue
|
|
891
|
+
return twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue transition-[background-size_color] contrast-more:from-ui-blue contrast-more:to-ui-blue');
|
|
899
892
|
}
|
|
900
893
|
};
|
|
901
894
|
// Define theme-specific multiline fill classes
|
|
902
895
|
const getMultilineFillClasses = (theme = 'blue') => {
|
|
903
896
|
switch (theme) {
|
|
904
897
|
case 'brown':
|
|
905
|
-
return 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
|
|
898
|
+
return 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');
|
|
906
899
|
case 'green':
|
|
907
|
-
return 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
|
|
900
|
+
return 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');
|
|
908
901
|
case 'grey':
|
|
909
|
-
return 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
|
|
902
|
+
return 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');
|
|
910
903
|
case 'sky-blue':
|
|
911
|
-
return 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
|
|
904
|
+
return 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');
|
|
912
905
|
case 'magenta':
|
|
913
|
-
return 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
|
|
906
|
+
return 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');
|
|
914
907
|
case 'neutral':
|
|
915
|
-
return twJoin(multilineFillBaseClasses, '
|
|
908
|
+
return 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');
|
|
916
909
|
case 'orange':
|
|
917
|
-
return 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
|
|
910
|
+
return 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');
|
|
918
911
|
case 'pink':
|
|
919
|
-
return 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
|
|
920
|
-
case 'primary':
|
|
921
|
-
return 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%]');
|
|
912
|
+
return 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');
|
|
922
913
|
case 'purple':
|
|
923
|
-
return 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
|
|
914
|
+
return 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');
|
|
924
915
|
case 'red':
|
|
925
|
-
return 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
|
|
916
|
+
return 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');
|
|
926
917
|
case 'violet':
|
|
927
|
-
return 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
|
|
918
|
+
return 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');
|
|
928
919
|
case 'yellow':
|
|
929
|
-
return 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
|
|
920
|
+
return 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');
|
|
930
921
|
case 'blue':
|
|
931
922
|
default:
|
|
932
|
-
return 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
|
|
923
|
+
return 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');
|
|
933
924
|
}
|
|
934
925
|
};
|
|
935
926
|
const getMultilineFillLiftClasses = (theme = 'blue') => {
|
|
936
|
-
return twJoin(getMultilineFillColorClasses(theme), '
|
|
927
|
+
return 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%]');
|
|
937
928
|
};
|
|
938
929
|
const getMultilineFillXClasses = (theme = 'blue') => {
|
|
939
|
-
return twJoin(getMultilineFillColorClasses(theme), '
|
|
930
|
+
return 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%]');
|
|
940
931
|
};
|
|
941
932
|
const getMultilineFillRtlClasses = (theme = 'blue') => {
|
|
942
933
|
return twJoin(getMultilineFillXClasses(theme), 'bg-[position:100%_auto]');
|
|
@@ -973,7 +964,7 @@ const getMultilineFillCenterClasses = (theme = 'blue') => {
|
|
|
973
964
|
* @example
|
|
974
965
|
* <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
|
|
975
966
|
*/
|
|
976
|
-
function Link({
|
|
967
|
+
function Link({ as, className, ref, theme = 'blue', type, ...props }) {
|
|
977
968
|
const getLinkClasses = () => {
|
|
978
969
|
switch (type) {
|
|
979
970
|
case 'static':
|
|
@@ -1021,14 +1012,15 @@ function Link({ type, theme = 'blue', className, ref, ...props }) {
|
|
|
1021
1012
|
}
|
|
1022
1013
|
};
|
|
1023
1014
|
const linkClasses = getLinkClasses();
|
|
1024
|
-
|
|
1015
|
+
const LinkElement = as || Anchor;
|
|
1016
|
+
return jsx(LinkElement, { ...props, className: twMerge(linkClasses, className), ref: ref });
|
|
1025
1017
|
}
|
|
1026
1018
|
|
|
1027
1019
|
/**
|
|
1028
1020
|
* # Button
|
|
1029
1021
|
* - A pre-styled button with utility props for easy customization depending on use case.
|
|
1030
1022
|
*/
|
|
1031
|
-
function Button({ className, padding = 'md', rounded = 'lg', theme = '
|
|
1023
|
+
function Button({ className, padding = 'md', rounded = 'lg', theme = 'blue', ref, ...props }) {
|
|
1032
1024
|
const getPaddingClasses = () => {
|
|
1033
1025
|
switch (padding) {
|
|
1034
1026
|
case 'xs':
|
|
@@ -1060,71 +1052,92 @@ function Button({ className, padding = 'md', rounded = 'lg', theme = 'primary',
|
|
|
1060
1052
|
}
|
|
1061
1053
|
};
|
|
1062
1054
|
const getThemeClasses = () => {
|
|
1055
|
+
const classList = [];
|
|
1063
1056
|
switch (theme) {
|
|
1064
1057
|
case 'blue':
|
|
1065
|
-
|
|
1058
|
+
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'));
|
|
1059
|
+
break;
|
|
1066
1060
|
case 'blue-gradient':
|
|
1067
|
-
|
|
1061
|
+
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'));
|
|
1062
|
+
break;
|
|
1068
1063
|
case 'brown':
|
|
1069
|
-
|
|
1064
|
+
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'));
|
|
1065
|
+
break;
|
|
1070
1066
|
case 'brown-gradient':
|
|
1071
|
-
|
|
1067
|
+
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'));
|
|
1068
|
+
break;
|
|
1072
1069
|
case 'green':
|
|
1073
|
-
|
|
1070
|
+
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'));
|
|
1071
|
+
break;
|
|
1074
1072
|
case 'green-gradient':
|
|
1075
|
-
|
|
1073
|
+
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'));
|
|
1074
|
+
break;
|
|
1076
1075
|
case 'grey':
|
|
1077
|
-
|
|
1076
|
+
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'));
|
|
1077
|
+
break;
|
|
1078
1078
|
case 'grey-gradient':
|
|
1079
|
-
|
|
1079
|
+
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'));
|
|
1080
|
+
break;
|
|
1080
1081
|
case 'sky-blue':
|
|
1081
|
-
|
|
1082
|
+
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'));
|
|
1083
|
+
break;
|
|
1082
1084
|
case 'sky-blue-gradient':
|
|
1083
|
-
|
|
1085
|
+
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'));
|
|
1086
|
+
break;
|
|
1084
1087
|
case 'magenta':
|
|
1085
|
-
|
|
1088
|
+
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'));
|
|
1089
|
+
break;
|
|
1086
1090
|
case 'magenta-gradient':
|
|
1087
|
-
|
|
1091
|
+
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'));
|
|
1092
|
+
break;
|
|
1088
1093
|
case 'neutral':
|
|
1089
|
-
|
|
1094
|
+
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'));
|
|
1095
|
+
break;
|
|
1090
1096
|
case 'neutral-gradient':
|
|
1091
|
-
|
|
1097
|
+
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'));
|
|
1098
|
+
break;
|
|
1092
1099
|
case 'orange':
|
|
1093
|
-
|
|
1100
|
+
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'));
|
|
1101
|
+
break;
|
|
1094
1102
|
case 'orange-gradient':
|
|
1095
|
-
|
|
1103
|
+
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'));
|
|
1104
|
+
break;
|
|
1096
1105
|
case 'pink':
|
|
1097
|
-
|
|
1106
|
+
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'));
|
|
1107
|
+
break;
|
|
1098
1108
|
case 'pink-gradient':
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
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]');
|
|
1102
|
-
case 'primary-gradient':
|
|
1103
|
-
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%]');
|
|
1109
|
+
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'));
|
|
1110
|
+
break;
|
|
1104
1111
|
case 'purple':
|
|
1105
|
-
|
|
1112
|
+
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'));
|
|
1113
|
+
break;
|
|
1106
1114
|
case 'purple-gradient':
|
|
1107
|
-
|
|
1115
|
+
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'));
|
|
1116
|
+
break;
|
|
1108
1117
|
case 'red':
|
|
1109
|
-
|
|
1118
|
+
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'));
|
|
1119
|
+
break;
|
|
1110
1120
|
case 'red-gradient':
|
|
1111
|
-
|
|
1121
|
+
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'));
|
|
1122
|
+
break;
|
|
1112
1123
|
case 'violet':
|
|
1113
|
-
|
|
1124
|
+
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'));
|
|
1125
|
+
break;
|
|
1114
1126
|
case 'violet-gradient':
|
|
1115
|
-
|
|
1127
|
+
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'));
|
|
1128
|
+
break;
|
|
1116
1129
|
case 'yellow':
|
|
1117
|
-
|
|
1130
|
+
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'));
|
|
1131
|
+
break;
|
|
1118
1132
|
case 'yellow-gradient':
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
default:
|
|
1122
|
-
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]');
|
|
1133
|
+
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'));
|
|
1134
|
+
break;
|
|
1123
1135
|
}
|
|
1136
|
+
return classList.join(' ');
|
|
1124
1137
|
};
|
|
1125
1138
|
const paddingClasses = getPaddingClasses(), roundedClasses = getRoundedClasses(), themeClasses = getThemeClasses();
|
|
1126
1139
|
const buttonClasses = twMerge([
|
|
1127
|
-
'ease-exponential focus-visible:scale-101 pointer-fine:hover:scale-101 pointer-fine:active:scale-99
|
|
1140
|
+
'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',
|
|
1128
1141
|
paddingClasses,
|
|
1129
1142
|
roundedClasses,
|
|
1130
1143
|
themeClasses,
|
|
@@ -1201,7 +1214,7 @@ function useFormStatus() {
|
|
|
1201
1214
|
return useStore(store => store);
|
|
1202
1215
|
}
|
|
1203
1216
|
|
|
1204
|
-
function validateField(value, { required, type }) {
|
|
1217
|
+
function validateField$1(value, { required, type }) {
|
|
1205
1218
|
const noValue = !value || value === '';
|
|
1206
1219
|
if (!required && noValue)
|
|
1207
1220
|
return true;
|
|
@@ -1218,8 +1231,8 @@ function validateField(value, { required, type }) {
|
|
|
1218
1231
|
return true;
|
|
1219
1232
|
}
|
|
1220
1233
|
}
|
|
1221
|
-
function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onChange, placeholder, ref, required = true, type, value, ...props }) {
|
|
1222
|
-
const [formContext, setFormContext] = useFormContext()
|
|
1234
|
+
function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, type, value, ...props }) {
|
|
1235
|
+
const [formContext, setFormContext] = useFormContext();
|
|
1223
1236
|
if (placeholder === '*')
|
|
1224
1237
|
placeholder = name + (required && !label ? '*' : '');
|
|
1225
1238
|
if (label === '*')
|
|
@@ -1244,7 +1257,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1244
1257
|
}
|
|
1245
1258
|
};
|
|
1246
1259
|
const fieldContextType = getFieldContextType();
|
|
1247
|
-
const
|
|
1260
|
+
const initialFieldContext = defineField({
|
|
1248
1261
|
type: fieldContextType,
|
|
1249
1262
|
id: fieldContextID,
|
|
1250
1263
|
invalid,
|
|
@@ -1256,13 +1269,14 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1256
1269
|
if (!setFormContext)
|
|
1257
1270
|
return;
|
|
1258
1271
|
setFormContext(prevContext => {
|
|
1259
|
-
const otherFields = (prevContext || []).filter(field => field.id !==
|
|
1260
|
-
return [...otherFields,
|
|
1272
|
+
const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
|
|
1273
|
+
return [...otherFields, initialFieldContext];
|
|
1261
1274
|
});
|
|
1262
1275
|
return () => {
|
|
1263
|
-
setFormContext(prevContext => (prevContext || []).filter(field => field.id !==
|
|
1276
|
+
setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
|
|
1264
1277
|
};
|
|
1265
1278
|
}, [setFormContext]);
|
|
1279
|
+
const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
|
|
1266
1280
|
const debounceTimerRef = useRef(undefined);
|
|
1267
1281
|
const handleChange = e => {
|
|
1268
1282
|
if (disabled) {
|
|
@@ -1274,32 +1288,66 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1274
1288
|
setFormContext?.(prevContext => {
|
|
1275
1289
|
if (!prevContext)
|
|
1276
1290
|
return [];
|
|
1277
|
-
const field = prevContext.find(({ id: fieldID }) => fieldID ===
|
|
1291
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1278
1292
|
if (!field)
|
|
1279
|
-
throw new Error(`Field with id "${
|
|
1280
|
-
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !==
|
|
1293
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1294
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1281
1295
|
const updatedField = { ...field, value: newValue };
|
|
1282
1296
|
return [...otherFields, updatedField];
|
|
1283
1297
|
});
|
|
1284
1298
|
debounceTimerRef.current = setTimeout(() => {
|
|
1285
|
-
const field = formContext?.find(({ id: fieldID }) => fieldID ===
|
|
1299
|
+
const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1286
1300
|
if (!field)
|
|
1287
1301
|
return;
|
|
1288
|
-
const invalid = validateField(newValue, field) === false;
|
|
1302
|
+
const invalid = validateField$1(newValue, field) === false;
|
|
1289
1303
|
if (invalid !== field.invalid)
|
|
1290
1304
|
setFormContext?.(prevContext => {
|
|
1291
1305
|
if (!prevContext)
|
|
1292
1306
|
return [];
|
|
1293
|
-
const field = prevContext.find(({ id: fieldID }) => fieldID ===
|
|
1307
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1294
1308
|
if (!field)
|
|
1295
|
-
throw new Error(`Field with id "${
|
|
1296
|
-
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !==
|
|
1309
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1310
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1297
1311
|
const updatedField = { ...field, invalid };
|
|
1298
1312
|
return [...otherFields, updatedField];
|
|
1299
1313
|
});
|
|
1300
1314
|
}, 500);
|
|
1301
1315
|
onChange?.(e);
|
|
1302
1316
|
};
|
|
1317
|
+
const handleBlur = e => {
|
|
1318
|
+
if (disabled) {
|
|
1319
|
+
e.preventDefault();
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
const { currentTarget } = e, { value: newValue } = currentTarget;
|
|
1323
|
+
switch (type) {
|
|
1324
|
+
case 'email':
|
|
1325
|
+
setFormContext?.(prevContext => {
|
|
1326
|
+
if (!prevContext)
|
|
1327
|
+
return [];
|
|
1328
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1329
|
+
if (!field)
|
|
1330
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1331
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1332
|
+
const updatedField = { ...field, value: newValue.toLowerCase() };
|
|
1333
|
+
return [...otherFields, updatedField];
|
|
1334
|
+
});
|
|
1335
|
+
break;
|
|
1336
|
+
case 'tel':
|
|
1337
|
+
setFormContext?.(prevContext => {
|
|
1338
|
+
if (!prevContext)
|
|
1339
|
+
return [];
|
|
1340
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1341
|
+
if (!field)
|
|
1342
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1343
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1344
|
+
const updatedField = { ...field, value: formatPhoneNumber(newValue, '1') };
|
|
1345
|
+
return [...otherFields, updatedField];
|
|
1346
|
+
});
|
|
1347
|
+
break;
|
|
1348
|
+
}
|
|
1349
|
+
onBlur?.(e);
|
|
1350
|
+
};
|
|
1303
1351
|
const restFieldProps = fieldProps
|
|
1304
1352
|
? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
|
|
1305
1353
|
: {};
|
|
@@ -1309,25 +1357,25 @@ function Input({ checked, className, defaultValue, description, descriptionProps
|
|
|
1309
1357
|
const restDescriptionProps = descriptionProps
|
|
1310
1358
|
? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
|
|
1311
1359
|
: {};
|
|
1312
|
-
return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(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 })), jsx(Input$1, { ...props, className: bag => twMerge(
|
|
1360
|
+
return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(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 })), jsx(Input$1, { ...props, className: bag => twMerge(
|
|
1361
|
+
// Base styles
|
|
1362
|
+
'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',
|
|
1363
|
+
// Pseudo styles
|
|
1364
|
+
'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',
|
|
1365
|
+
// user-invalid styles
|
|
1366
|
+
'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))]',
|
|
1367
|
+
// Custom styles
|
|
1368
|
+
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 && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
|
|
1313
1369
|
? descriptionProps?.className(bag)
|
|
1314
1370
|
: descriptionProps?.className), children: description }))] }));
|
|
1315
1371
|
}
|
|
1316
1372
|
|
|
1317
|
-
function SubmitButton({ children, className,
|
|
1373
|
+
function SubmitButton({ children, className, error, incomplete, loading, success, theme, type = 'submit', ref, ...props }) {
|
|
1318
1374
|
const [formStatus] = useFormStatus();
|
|
1319
|
-
const getDisabledStatus = () => {
|
|
1320
|
-
if (ariaDisabled !== undefined)
|
|
1321
|
-
return ariaDisabled;
|
|
1322
|
-
if (formStatus !== 'ready')
|
|
1323
|
-
return 'true';
|
|
1324
|
-
return 'false';
|
|
1325
|
-
};
|
|
1326
|
-
const disabled = getDisabledStatus();
|
|
1327
1375
|
const getFormStatusButtonClasses = () => {
|
|
1328
1376
|
switch (formStatus) {
|
|
1329
1377
|
case 'loading':
|
|
1330
|
-
return twSort('animate-pulse cursor-wait text-lg font-black
|
|
1378
|
+
return twSort('animate-pulse cursor-wait text-lg leading-6 font-black tracking-widest');
|
|
1331
1379
|
case 'error':
|
|
1332
1380
|
case 'success':
|
|
1333
1381
|
return 'cursor-not-allowed';
|
|
@@ -1356,7 +1404,7 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
|
|
|
1356
1404
|
case 'incomplete':
|
|
1357
1405
|
return incomplete || 'Complete Form';
|
|
1358
1406
|
case 'loading':
|
|
1359
|
-
return (loading || (jsxs(Fragment$1, { children: [jsx("span", { className: 'animate-wave animation-delay-300
|
|
1407
|
+
return (loading || (jsxs(Fragment$1, { children: [jsx("span", { className: 'inline-block animate-wave animation-delay-300', children: "\u2022" }), jsx("span", { className: 'inline-block animate-wave animation-delay-150', children: "\u2022" }), jsx("span", { className: 'inline-block animate-wave', children: "\u2022" })] })));
|
|
1360
1408
|
case 'error':
|
|
1361
1409
|
return (jsxs(Fragment$1, { children: [error || 'Error', ' ', jsx("span", { className: 'absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl', children: "\u00D7" })] }));
|
|
1362
1410
|
case 'success':
|
|
@@ -1366,7 +1414,103 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
|
|
|
1366
1414
|
}
|
|
1367
1415
|
};
|
|
1368
1416
|
const buttonText = getButtonText();
|
|
1369
|
-
return (jsx(Button, { ...props,
|
|
1417
|
+
return (jsx(Button, { ...props, className: twMerge([formStatusButtonClasses, 'w-full', className]), ref: ref, theme: formStatusButtonTheme, type: type, children: buttonText }));
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
function validateField(value, { required }) {
|
|
1421
|
+
const noValue = !value || value === '';
|
|
1422
|
+
if (!required && noValue)
|
|
1423
|
+
return true;
|
|
1424
|
+
if (noValue)
|
|
1425
|
+
return false;
|
|
1426
|
+
return true;
|
|
1427
|
+
}
|
|
1428
|
+
function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, value, ...props }) {
|
|
1429
|
+
const [formContext, setFormContext] = useFormContext();
|
|
1430
|
+
if (placeholder === '*')
|
|
1431
|
+
placeholder = name + (required && !label ? '*' : '');
|
|
1432
|
+
if (label === '*')
|
|
1433
|
+
label = name;
|
|
1434
|
+
const uniqueID = useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
|
|
1435
|
+
if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
|
|
1436
|
+
invalid = true;
|
|
1437
|
+
const initialFieldContext = defineField({
|
|
1438
|
+
type: 'textarea',
|
|
1439
|
+
id: fieldContextID,
|
|
1440
|
+
invalid,
|
|
1441
|
+
name,
|
|
1442
|
+
required,
|
|
1443
|
+
value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
|
|
1444
|
+
});
|
|
1445
|
+
useEffect(() => {
|
|
1446
|
+
if (!setFormContext)
|
|
1447
|
+
return;
|
|
1448
|
+
setFormContext(prevContext => {
|
|
1449
|
+
const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
|
|
1450
|
+
return [...otherFields, initialFieldContext];
|
|
1451
|
+
});
|
|
1452
|
+
return () => {
|
|
1453
|
+
setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
|
|
1454
|
+
};
|
|
1455
|
+
}, [setFormContext]);
|
|
1456
|
+
const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
|
|
1457
|
+
const debounceTimerRef = useRef(undefined);
|
|
1458
|
+
const handleChange = e => {
|
|
1459
|
+
if (disabled) {
|
|
1460
|
+
e.preventDefault();
|
|
1461
|
+
return;
|
|
1462
|
+
}
|
|
1463
|
+
clearTimeout(debounceTimerRef.current);
|
|
1464
|
+
const { currentTarget } = e, { value: newValue } = currentTarget;
|
|
1465
|
+
setFormContext?.(prevContext => {
|
|
1466
|
+
if (!prevContext)
|
|
1467
|
+
return [];
|
|
1468
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1469
|
+
if (!field)
|
|
1470
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1471
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1472
|
+
const updatedField = { ...field, value: newValue };
|
|
1473
|
+
return [...otherFields, updatedField];
|
|
1474
|
+
});
|
|
1475
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
1476
|
+
const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1477
|
+
if (!field)
|
|
1478
|
+
return;
|
|
1479
|
+
const invalid = validateField(newValue, field) === false;
|
|
1480
|
+
if (invalid !== field.invalid)
|
|
1481
|
+
setFormContext?.(prevContext => {
|
|
1482
|
+
if (!prevContext)
|
|
1483
|
+
return [];
|
|
1484
|
+
const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
|
|
1485
|
+
if (!field)
|
|
1486
|
+
throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
|
|
1487
|
+
const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
|
|
1488
|
+
const updatedField = { ...field, invalid };
|
|
1489
|
+
return [...otherFields, updatedField];
|
|
1490
|
+
});
|
|
1491
|
+
}, 500);
|
|
1492
|
+
onChange?.(e);
|
|
1493
|
+
};
|
|
1494
|
+
const restFieldProps = fieldProps
|
|
1495
|
+
? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
|
|
1496
|
+
: {};
|
|
1497
|
+
const restLabelProps = labelProps
|
|
1498
|
+
? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
|
|
1499
|
+
: {};
|
|
1500
|
+
const restDescriptionProps = descriptionProps
|
|
1501
|
+
? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
|
|
1502
|
+
: {};
|
|
1503
|
+
return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(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 })), jsx(Textarea$1, { ...props, className: bag => twMerge(
|
|
1504
|
+
// Base styles
|
|
1505
|
+
'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',
|
|
1506
|
+
// Pseudo styles
|
|
1507
|
+
'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',
|
|
1508
|
+
// user-invalid styles
|
|
1509
|
+
'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))]',
|
|
1510
|
+
// Custom styles
|
|
1511
|
+
typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
|
|
1512
|
+
? descriptionProps?.className(bag)
|
|
1513
|
+
: descriptionProps?.className), children: description }))] }));
|
|
1370
1514
|
}
|
|
1371
1515
|
|
|
1372
1516
|
// import { findComponentByType } from '../../utils'
|
|
@@ -1426,23 +1570,23 @@ function getTextFromChildren(children) {
|
|
|
1426
1570
|
* A heading component that renders HTML heading elements (h1-h6) with appropriate styling.
|
|
1427
1571
|
* Automatically generates an ID for the heading based on its content if none is provided.
|
|
1428
1572
|
*/
|
|
1429
|
-
function Heading({ as = 'h2', children, className, id, ref, ...props }) {
|
|
1573
|
+
function Heading({ as = 'h2', children, customize, className, id, ref, ...props }) {
|
|
1430
1574
|
const H = as;
|
|
1431
1575
|
const targetableID = id || getTextFromChildren(children).replace(/\s+/g, '-').toLowerCase();
|
|
1432
1576
|
const getBaseClasses = () => {
|
|
1433
1577
|
switch (as) {
|
|
1434
1578
|
case 'h1':
|
|
1435
|
-
return twSort('pb-2.5 text-6xl font-black last:pb-0');
|
|
1579
|
+
return customize?.h1 || twSort('pb-2.5 text-6xl font-black last:pb-0');
|
|
1436
1580
|
case 'h3':
|
|
1437
|
-
return twSort('pb-2 text-4xl font-extralight last:pb-0');
|
|
1581
|
+
return customize?.h3 || twSort('pb-2 text-4xl font-extralight last:pb-0');
|
|
1438
1582
|
case 'h4':
|
|
1439
|
-
return twSort('pb-2 text-3xl font-extrabold last:pb-0');
|
|
1583
|
+
return customize?.h4 || twSort('pb-2 text-3xl font-extrabold last:pb-0');
|
|
1440
1584
|
case 'h5':
|
|
1441
|
-
return twSort('pb-1.5 text-2xl font-semibold last:pb-0');
|
|
1585
|
+
return customize?.h5 || twSort('pb-1.5 text-2xl font-semibold last:pb-0');
|
|
1442
1586
|
case 'h6':
|
|
1443
|
-
return twSort('pb-1 text-xl font-bold last:pb-0');
|
|
1587
|
+
return customize?.h6 || twSort('pb-1 text-xl font-bold last:pb-0');
|
|
1444
1588
|
default:
|
|
1445
|
-
return twSort('pb-2.5 text-5xl font-medium last:pb-0');
|
|
1589
|
+
return customize?.h2 || twSort('pb-2.5 text-5xl font-medium last:pb-0');
|
|
1446
1590
|
}
|
|
1447
1591
|
};
|
|
1448
1592
|
const baseClasses = getBaseClasses();
|
|
@@ -2031,5 +2175,5 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
|
|
|
2031
2175
|
return (jsx("time", { dateTime: dateAndTime, ref: ref, ...props, children: dateDisplay }));
|
|
2032
2176
|
}
|
|
2033
2177
|
|
|
2034
|
-
export { Airplane, Anchor, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Button, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocOnMagnifyingglass as DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, ExclamationmarkOctagon, Eye, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Form, FormContextProvider, FormStatusProvider, Gearshape, GearshapeFill, Ghost, GiftFill, GlobeAmericasFill, HareFill, Heading, House, HouseDeskclock, HouseFill, IPhoneHouse, Input, LightRibbon, LightbulbFill, LightbulbLed, Link, ListBulletClipboardFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Modal, ModalDialog, ModalTrigger, Network, NetworkShield, NewspaperFill, Number$1 as Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, SubmitButton, TextBubble, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Time, Trash, TrashFill, Tree, UmbrellaFill, xmark as Xmark, addClass, currentMonthName, currentWeekdayName, daysInMonth, defineField, easeOutExpo, emailRegex, extendMadoTailwindMerge, findComponentByType, firstOfMonth, formatPhoneNumber, getDate, getHours, getHoursIn12, getMeridianFromHour, getMilliseconds, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getPreviousMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getWeekdayName, getYearsInRange, hasClass, isEmail, isPhoneNumber, monthNamesList, removeClass, telRegex, toFullDateString, toLowerCase, toggleClass, twMerge, twSort, useFormContext, useFormStatus, weekdayNamesList };
|
|
2178
|
+
export { Airplane, Anchor, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Button, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocOnMagnifyingglass as DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, ExclamationmarkOctagon, Eye, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Form, FormContextProvider, FormStatusProvider, Gearshape, GearshapeFill, Ghost, GiftFill, GlobeAmericasFill, HareFill, Heading, House, HouseDeskclock, HouseFill, IPhoneHouse, Input, LightRibbon, LightbulbFill, LightbulbLed, Link, ListBulletClipboardFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Modal, ModalDialog, ModalTrigger, Network, NetworkShield, NewspaperFill, Number$1 as Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, SubmitButton, TextBubble, Textarea, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Time, Trash, TrashFill, Tree, UmbrellaFill, xmark as Xmark, addClass, currentMonthName, currentWeekdayName, daysInMonth, defineField, easeOutExpo, emailRegex, extendMadoTailwindMerge, findComponentByType, firstOfMonth, formatPhoneNumber, getDate, getHours, getHoursIn12, getMeridianFromHour, getMilliseconds, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getPreviousMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getWeekdayName, getYearsInRange, hasClass, isEmail, isPhoneNumber, monthNamesList, removeClass, telRegex, toFullDateString, toLowerCase, toggleClass, twMerge, twSort, useFormContext, useFormStatus, weekdayNamesList };
|
|
2035
2179
|
//# sourceMappingURL=index.esm.js.map
|