@yamada-ui/carousel 2.0.7-dev-20241008192433 → 2.0.7-dev-20241008200201

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/carousel-control.js.map +1 -1
  2. package/dist/carousel-control.mjs +2 -2
  3. package/dist/carousel-indicators.js.map +1 -1
  4. package/dist/carousel-indicators.mjs +2 -2
  5. package/dist/carousel-slide.js +4 -5
  6. package/dist/carousel-slide.js.map +1 -1
  7. package/dist/carousel-slide.mjs +2 -2
  8. package/dist/carousel.js +21 -25
  9. package/dist/carousel.js.map +1 -1
  10. package/dist/carousel.mjs +5 -5
  11. package/dist/{chunk-GUS42GBZ.mjs → chunk-CXXL47SC.mjs} +6 -7
  12. package/dist/chunk-CXXL47SC.mjs.map +1 -0
  13. package/dist/{chunk-MVAYW6S5.mjs → chunk-LOQSJZAS.mjs} +13 -21
  14. package/dist/chunk-LOQSJZAS.mjs.map +1 -0
  15. package/dist/{chunk-UGZPN7LD.mjs → chunk-PEXGWNKB.mjs} +2 -2
  16. package/dist/chunk-PEXGWNKB.mjs.map +1 -0
  17. package/dist/{chunk-MRBEMM2G.mjs → chunk-SYCPZC2C.mjs} +11 -6
  18. package/dist/chunk-SYCPZC2C.mjs.map +1 -0
  19. package/dist/{chunk-LZCAOPIG.mjs → chunk-UTOIPGGP.mjs} +2 -2
  20. package/dist/chunk-UTOIPGGP.mjs.map +1 -0
  21. package/dist/index.js +21 -25
  22. package/dist/index.js.map +1 -1
  23. package/dist/index.mjs +5 -5
  24. package/dist/use-carousel.d.mts +1 -29
  25. package/dist/use-carousel.d.ts +1 -29
  26. package/dist/use-carousel.js +9 -4
  27. package/dist/use-carousel.js.map +1 -1
  28. package/dist/use-carousel.mjs +1 -1
  29. package/package.json +7 -8
  30. package/dist/chunk-GUS42GBZ.mjs.map +0 -1
  31. package/dist/chunk-LZCAOPIG.mjs.map +0 -1
  32. package/dist/chunk-MRBEMM2G.mjs.map +0 -1
  33. package/dist/chunk-MVAYW6S5.mjs.map +0 -1
  34. package/dist/chunk-UGZPN7LD.mjs.map +0 -1
package/dist/use-carousel.d.mts CHANGED
@@ -13,12 +13,10 @@ type SlidesHandlerOptionType = EmblaOptionsType["watchSlides"];
13
13
  type CarouselControl = EmblaCarouselType;
14
14
  interface CarouselContext {
15
15
  carousel: CarouselControl | undefined;
16
- gap: CSSUIProps["gap"];
17
16
  includeGapInSize: boolean;
18
17
  indexes: number[];
19
18
  orientation: "horizontal" | "vertical";
20
19
  selectedIndex: number;
21
- slideSize: number | string;
22
20
  slidesToScroll: number;
23
21
  styles: {
24
22
  [key: string]: CSSUIObject | undefined;
@@ -129,7 +127,7 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "draggable" | "gap" | "onCh
129
127
  *
130
128
  * @default '100%'
131
129
  */
132
- slideSize?: number | string;
130
+ slideSize?: CSSUIProps["width"];
133
131
  /**
134
132
  * The number of slides that should be scrolled with next or previous buttons.
135
133
  *
@@ -175,36 +173,10 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "draggable" | "gap" | "onCh
175
173
  declare const useCarousel: ({ align, autoplay, children, containScroll, controlRef, defaultIndex, delay, dragFree, draggable, duration, includeGapInSize, index, inViewThreshold, loop, orientation, skipSnaps, slideSize, slidesToScroll, stopMouseEnterAutoplay, watchDrag, watchResize, watchSlides, onChange, onScrollProgress, ...rest }: UseCarouselProps) => {
176
174
  carousel: EmblaCarouselType | undefined;
177
175
  children: react.ReactNode;
178
- gap: string | number | (string & {}) | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | {
179
- [x: string]: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
180
- base?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
181
- "2xl"?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
182
- lg?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
183
- md?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
184
- sm?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
185
- xl?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
186
- }, number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | {
187
- [x: string]: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
188
- base?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
189
- "2xl"?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
190
- lg?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
191
- md?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
192
- sm?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
193
- xl?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
194
- }] | {
195
- [x: string]: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
196
- base?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
197
- "2xl"?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
198
- lg?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
199
- md?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
200
- sm?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
201
- xl?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
202
- };
203
176
  includeGapInSize: boolean;
204
177
  indexes: number[];
205
178
  orientation: "horizontal" | "vertical";
206
179
  selectedIndex: number;
207
- slideSize: string | number;
208
180
  slidesToScroll: number;
209
181
  getContainerProps: PropGetter<"div", undefined>;
210
182
  getSlidesProps: PropGetter<"div", undefined>;
package/dist/use-carousel.d.ts CHANGED
@@ -13,12 +13,10 @@ type SlidesHandlerOptionType = EmblaOptionsType["watchSlides"];
13
13
  type CarouselControl = EmblaCarouselType;
14
14
  interface CarouselContext {
15
15
  carousel: CarouselControl | undefined;
16
- gap: CSSUIProps["gap"];
17
16
  includeGapInSize: boolean;
18
17
  indexes: number[];
19
18
  orientation: "horizontal" | "vertical";
20
19
  selectedIndex: number;
21
- slideSize: number | string;
22
20
  slidesToScroll: number;
23
21
  styles: {
24
22
  [key: string]: CSSUIObject | undefined;
@@ -129,7 +127,7 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "draggable" | "gap" | "onCh
129
127
  *
130
128
  * @default '100%'
131
129
  */
132
- slideSize?: number | string;
130
+ slideSize?: CSSUIProps["width"];
133
131
  /**
134
132
  * The number of slides that should be scrolled with next or previous buttons.
135
133
  *
@@ -175,36 +173,10 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "draggable" | "gap" | "onCh
175
173
  declare const useCarousel: ({ align, autoplay, children, containScroll, controlRef, defaultIndex, delay, dragFree, draggable, duration, includeGapInSize, index, inViewThreshold, loop, orientation, skipSnaps, slideSize, slidesToScroll, stopMouseEnterAutoplay, watchDrag, watchResize, watchSlides, onChange, onScrollProgress, ...rest }: UseCarouselProps) => {
176
174
  carousel: EmblaCarouselType | undefined;
177
175
  children: react.ReactNode;
178
- gap: string | number | (string & {}) | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | {
179
- [x: string]: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
180
- base?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
181
- "2xl"?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
182
- lg?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
183
- md?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
184
- sm?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
185
- xl?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
186
- }, number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | {
187
- [x: string]: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
188
- base?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
189
- "2xl"?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
190
- lg?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
191
- md?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
192
- sm?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
193
- xl?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | undefined;
194
- }] | {
195
- [x: string]: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
196
- base?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
197
- "2xl"?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
198
- lg?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
199
- md?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
200
- sm?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
201
- xl?: number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs" | [number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs", number | "px" | (string & {}) | "inherit" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "3xl" | "4" | "4.5" | "4xl" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "xs" | "-0.5" | "-1" | "-1.5" | "-2" | "-2.5" | "-2xl" | "-3" | "-3.5" | "-3xl" | "-4" | "-4.5" | "-4xl" | "-5" | "-5.5" | "-6" | "-6.5" | "-7" | "-7.5" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-lg" | "-md" | "-normal" | "-px" | "-sm" | "-xl" | "-xs"] | undefined;
202
- };
203
176
  includeGapInSize: boolean;
204
177
  indexes: number[];
205
178
  orientation: "horizontal" | "vertical";
206
179
  selectedIndex: number;
207
- slideSize: string | number;
208
180
  slidesToScroll: number;
209
181
  getContainerProps: PropGetter<"div", undefined>;
210
182
  getSlidesProps: PropGetter<"div", undefined>;
package/dist/use-carousel.js CHANGED
@@ -75,7 +75,10 @@ var useCarousel = ({
75
75
  onScrollProgress,
76
76
  ...rest
77
77
  }) => {
78
- const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
78
+ const [
79
+ { gap = "fallback(4, 1rem)", ...containerProps },
80
+ { vars, ...slidesProps }
81
+ ] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
79
82
  const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
80
83
  defaultValue: defaultIndex,
81
84
  value: index,
@@ -188,6 +191,10 @@ var useCarousel = ({
188
191
  ...containerProps,
189
192
  ...props,
190
193
  ref,
194
+ vars: (0, import_core.mergeVars)(vars, [
195
+ { name: "gap", token: "spaces", value: gap },
196
+ { name: "slideSize", token: "sizes", value: slideSize }
197
+ ]),
191
198
  onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
192
199
  setIsMouseEnter(true);
193
200
  }),
@@ -195,7 +202,7 @@ var useCarousel = ({
195
202
  setIsMouseEnter(false);
196
203
  })
197
204
  }),
198
- [containerProps]
205
+ [containerProps, gap, slideSize, vars]
199
206
  );
200
207
  const getSlidesProps = (0, import_react.useCallback)(
201
208
  (props = {}) => ({
@@ -208,12 +215,10 @@ var useCarousel = ({
208
215
  return {
209
216
  carousel,
210
217
  children,
211
- gap,
212
218
  includeGapInSize,
213
219
  indexes,
214
220
  orientation,
215
221
  selectedIndex,
216
- slideSize,
217
222
  slidesToScroll,
218
223
  getContainerProps,
219
224
  getSlidesProps
package/dist/use-carousel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n CSSUIProps,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n carousel: CarouselControl | undefined\n gap: CSSUIProps[\"gap\"]\n includeGapInSize: boolean\n indexes: number[]\n orientation: \"horizontal\" | \"vertical\"\n selectedIndex: number\n slideSize: number | string\n slidesToScroll: number\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport interface UseCarouselProps\n extends Omit<HTMLUIProps, \"draggable\" | \"gap\" | \"onChange\"> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: ScrollContainOptionType\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: SlidesInViewOptionsType\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: number | string\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: DragHandlerOptionType\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: ResizeHandlerOptionType\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: SlidesHandlerOptionType\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n align = \"center\",\n autoplay = false,\n children,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n includeGapInSize = true,\n index,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n skipSnaps = false,\n slideSize = \"100%\",\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps) => {\n const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: index,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis: isVertical ? \"y\" : \"x\",\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n [],\n )\n\n assignRef(controlRef, carousel)\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n duration,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (index === undefined) return\n\n carousel.scrollTo(index)\n }, [index])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...containerProps,\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps],\n )\n\n const getSlidesProps: PropGetter = useCallback(\n (props = {}) => ({\n ...slidesProps,\n ...props,\n ref: carouselRef,\n }),\n [slidesProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n gap,\n includeGapInSize,\n indexes,\n orientation,\n selectedIndex,\n slideSize,\n slidesToScroll,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / slidesToScroll)\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n operation: \"next\" | \"prev\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { carousel, indexes, selectedIndex } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredPropGetter<\n { index: number } & HTMLProps<\"button\">,\n HTMLProps<\"button\">\n > = useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}
1
+ {"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n CSSUIProps,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { layoutStyleProperties, mergeVars } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n carousel: CarouselControl | undefined\n includeGapInSize: boolean\n indexes: number[]\n orientation: \"horizontal\" | \"vertical\"\n selectedIndex: number\n slidesToScroll: number\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport interface UseCarouselProps\n extends Omit<HTMLUIProps, \"draggable\" | \"gap\" | \"onChange\"> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: ScrollContainOptionType\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: SlidesInViewOptionsType\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: DragHandlerOptionType\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: ResizeHandlerOptionType\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: SlidesHandlerOptionType\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n align = \"center\",\n autoplay = false,\n children,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n includeGapInSize = true,\n index,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n skipSnaps = false,\n slideSize = \"100%\",\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps) => {\n const [\n { gap = \"fallback(4, 1rem)\", ...containerProps },\n { vars, ...slidesProps },\n ] = splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: index,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis: isVertical ? \"y\" : \"x\",\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n [],\n )\n\n assignRef(controlRef, carousel)\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n duration,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (index === undefined) return\n\n carousel.scrollTo(index)\n }, [index])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...containerProps,\n ...props,\n ref,\n vars: mergeVars(vars, [\n { name: \"gap\", token: \"spaces\", value: gap },\n { name: \"slideSize\", token: \"sizes\", value: slideSize },\n ]),\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps, gap, slideSize, vars],\n )\n\n const getSlidesProps: PropGetter = useCallback(\n (props = {}) => ({\n ...slidesProps,\n ...props,\n ref: carouselRef,\n }),\n [slidesProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n includeGapInSize,\n indexes,\n orientation,\n selectedIndex,\n slidesToScroll,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / slidesToScroll)\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n operation: \"next\" | \"prev\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { carousel, indexes, selectedIndex } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredPropGetter<\n { index: number } & HTMLProps<\"button\">,\n HTMLProps<\"button\">\n > = useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}
package/dist/use-carousel.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  useCarouselControl,
7
7
  useCarouselIndicators,
8
8
  useCarouselSlide
9
- } from "./chunk-MRBEMM2G.mjs";
9
+ } from "./chunk-SYCPZC2C.mjs";
10
10
  export {
11
11
  CarouselProvider,
12
12
  useCarousel,