erp-pro-ui 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.mjs +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.mjs +1 -1
- package/dist/carousel.cjs +1 -1
- package/dist/carousel.mjs +1 -1
- package/dist/catalog.cjs +6 -0
- package/dist/catalog.cjs.map +1 -1
- package/dist/catalog.d.ts +11 -1
- package/dist/catalog.d.ts.map +1 -1
- package/dist/catalog.mjs +6 -0
- package/dist/catalog.mjs.map +1 -1
- package/dist/charts.cjs +2 -1
- package/dist/charts.mjs +2 -2
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.mjs +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.mjs +1 -1
- package/dist/chroma-grid.cjs +1 -1
- package/dist/chroma-grid.mjs +1 -1
- package/dist/chunks/{calendar-xrGmvukr.cjs → calendar-Cpp_Rc7T.cjs} +58 -17
- package/dist/chunks/calendar-Cpp_Rc7T.cjs.map +1 -0
- package/dist/chunks/{calendar-BarcG6x_.mjs → calendar-DrCgT_pj.mjs} +58 -17
- package/dist/chunks/calendar-DrCgT_pj.mjs.map +1 -0
- package/dist/chunks/{card-gt-HZh0h.cjs → card-C5_tFK6Q.cjs} +1 -1
- package/dist/chunks/{card-gt-HZh0h.cjs.map → card-C5_tFK6Q.cjs.map} +1 -1
- package/dist/chunks/{card-CcIF6z2H.mjs → card-Dh8wNv8N.mjs} +1 -1
- package/dist/chunks/{card-CcIF6z2H.mjs.map → card-Dh8wNv8N.mjs.map} +1 -1
- package/dist/chunks/{carousel-DJdqBVRK.mjs → carousel-BYwqI4cA.mjs} +1 -1
- package/dist/chunks/{carousel-DJdqBVRK.mjs.map → carousel-BYwqI4cA.mjs.map} +1 -1
- package/dist/chunks/{carousel-Cq5uwqQt.cjs → carousel-C1338X8h.cjs} +1 -1
- package/dist/chunks/{carousel-Cq5uwqQt.cjs.map → carousel-C1338X8h.cjs.map} +1 -1
- package/dist/chunks/{charts-DugYWvEf.mjs → charts-BYvM4TMG.mjs} +371 -117
- package/dist/chunks/charts-BYvM4TMG.mjs.map +1 -0
- package/dist/chunks/{charts-BpElnsoR.cjs → charts-DbxyHtlX.cjs} +375 -115
- package/dist/chunks/charts-DbxyHtlX.cjs.map +1 -0
- package/dist/chunks/{checkbox-yHuSw-hV.cjs → checkbox-CxOcjoGP.cjs} +1 -1
- package/dist/chunks/{checkbox-yHuSw-hV.cjs.map → checkbox-CxOcjoGP.cjs.map} +1 -1
- package/dist/chunks/{checkbox-DvwlGwWe.mjs → checkbox-Pr49U9F1.mjs} +1 -1
- package/dist/chunks/{checkbox-DvwlGwWe.mjs.map → checkbox-Pr49U9F1.mjs.map} +1 -1
- package/dist/chunks/{chip-DcBji__g.cjs → chip-B4ol1yPk.cjs} +1 -1
- package/dist/chunks/{chip-DcBji__g.cjs.map → chip-B4ol1yPk.cjs.map} +1 -1
- package/dist/chunks/{chip-BGSUmnlO.mjs → chip-DdnBLdpl.mjs} +1 -1
- package/dist/chunks/{chip-BGSUmnlO.mjs.map → chip-DdnBLdpl.mjs.map} +1 -1
- package/dist/chunks/{chroma-grid-Cdeql_2C.mjs → chroma-grid-BAo6V5A7.mjs} +1 -1
- package/dist/chunks/{chroma-grid-Cdeql_2C.mjs.map → chroma-grid-BAo6V5A7.mjs.map} +1 -1
- package/dist/chunks/{chroma-grid-9E9j1s9I.cjs → chroma-grid-CIk0dsNS.cjs} +1 -1
- package/dist/chunks/{chroma-grid-9E9j1s9I.cjs.map → chroma-grid-CIk0dsNS.cjs.map} +1 -1
- package/dist/chunks/{color-palette-BLvDnCOD.cjs → color-palette-2TuEMkAn.cjs} +1 -1
- package/dist/chunks/{color-palette-BLvDnCOD.cjs.map → color-palette-2TuEMkAn.cjs.map} +1 -1
- package/dist/chunks/{color-palette-CXlCDiZz.mjs → color-palette-euKQMWlV.mjs} +1 -1
- package/dist/chunks/{color-palette-CXlCDiZz.mjs.map → color-palette-euKQMWlV.mjs.map} +1 -1
- package/dist/chunks/{combobox-BXu3s0dt.cjs → combobox-CwGubKTt.cjs} +2 -2
- package/dist/chunks/combobox-CwGubKTt.cjs.map +1 -0
- package/dist/chunks/{combobox-CjK-qG4k.mjs → combobox-DrFmkI0F.mjs} +2 -2
- package/dist/chunks/combobox-DrFmkI0F.mjs.map +1 -0
- package/dist/chunks/{data-table-DyEQn9Yj.mjs → data-table-Bo80m7qV.mjs} +8 -8
- package/dist/chunks/{data-table-DyEQn9Yj.mjs.map → data-table-Bo80m7qV.mjs.map} +1 -1
- package/dist/chunks/{data-table-9HELVsYR.cjs → data-table-W1sK5tkL.cjs} +8 -8
- package/dist/chunks/{data-table-9HELVsYR.cjs.map → data-table-W1sK5tkL.cjs.map} +1 -1
- package/dist/chunks/{date-picker-D8gaaMlJ.mjs → date-picker-CNPORxhv.mjs} +87 -17
- package/dist/chunks/date-picker-CNPORxhv.mjs.map +1 -0
- package/dist/chunks/{date-picker-W9om1j7A.cjs → date-picker-CZo68Fkl.cjs} +87 -17
- package/dist/chunks/date-picker-CZo68Fkl.cjs.map +1 -0
- package/dist/chunks/input-BWM6G7jq.cjs +117 -0
- package/dist/chunks/input-BWM6G7jq.cjs.map +1 -0
- package/dist/chunks/input-Bt_r_B_c.mjs +105 -0
- package/dist/chunks/input-Bt_r_B_c.mjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-ELSH_Xr4.mjs → multi-select-combobox-D46M-AN9.mjs} +2 -2
- package/dist/chunks/multi-select-combobox-D46M-AN9.mjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-UW0X15W7.cjs → multi-select-combobox-dS6bJE_e.cjs} +2 -2
- package/dist/chunks/multi-select-combobox-dS6bJE_e.cjs.map +1 -0
- package/dist/chunks/{otp-input-B6zzOEqw.cjs → otp-input-DSW9Ca_D.cjs} +2 -2
- package/dist/chunks/otp-input-DSW9Ca_D.cjs.map +1 -0
- package/dist/chunks/{otp-input-Bg4nQG6x.mjs → otp-input-DeAi4nJ_.mjs} +2 -2
- package/dist/chunks/otp-input-DeAi4nJ_.mjs.map +1 -0
- package/dist/chunks/{progress-bar-C9FZDrju.mjs → progress-bar-B9sy7WBT.mjs} +1 -1
- package/dist/chunks/{progress-bar-C9FZDrju.mjs.map → progress-bar-B9sy7WBT.mjs.map} +1 -1
- package/dist/chunks/{progress-bar-C1OvQ-NI.cjs → progress-bar-BdvQtpm3.cjs} +1 -1
- package/dist/chunks/{progress-bar-C1OvQ-NI.cjs.map → progress-bar-BdvQtpm3.cjs.map} +1 -1
- package/dist/chunks/select-B8UQ6Uq5.mjs +170 -0
- package/dist/chunks/select-B8UQ6Uq5.mjs.map +1 -0
- package/dist/chunks/select-CCUSMvfS.cjs +176 -0
- package/dist/chunks/select-CCUSMvfS.cjs.map +1 -0
- package/dist/chunks/stepper-D6qQbZdg.cjs +642 -0
- package/dist/chunks/stepper-D6qQbZdg.cjs.map +1 -0
- package/dist/chunks/stepper-DUknuW2E.mjs +618 -0
- package/dist/chunks/stepper-DUknuW2E.mjs.map +1 -0
- package/dist/chunks/{textarea-CU5C-Zw9.mjs → textarea-Blky_fLK.mjs} +2 -2
- package/dist/chunks/{textarea-CU5C-Zw9.mjs.map → textarea-Blky_fLK.mjs.map} +1 -1
- package/dist/chunks/{textarea-CAUsyu4-.cjs → textarea-ok_NlE2p.cjs} +2 -2
- package/dist/chunks/textarea-ok_NlE2p.cjs.map +1 -0
- package/dist/color-palette.cjs +1 -1
- package/dist/color-palette.mjs +1 -1
- package/dist/colors.css +3 -0
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/AreaChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/BarChart.d.ts +1 -0
- package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/NeonLineChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/PieChart.d.ts +18 -2
- package/dist/components/data-display/charts/PieChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/PositiveNegativeBarChart.d.ts +21 -0
- package/dist/components/data-display/charts/PositiveNegativeBarChart.d.ts.map +1 -0
- package/dist/components/data-display/charts/StackedBarChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/ThinBreakdownBar.d.ts +3 -0
- package/dist/components/data-display/charts/ThinBreakdownBar.d.ts.map +1 -1
- package/dist/components/data-display/charts/chartStyles.d.ts +24 -0
- package/dist/components/data-display/charts/chartStyles.d.ts.map +1 -0
- package/dist/components/data-display/charts/index.d.ts +2 -0
- package/dist/components/data-display/charts/index.d.ts.map +1 -1
- package/dist/components/forms/calendar/Calendar.d.ts.map +1 -1
- package/dist/components/forms/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/forms/input/Input.d.ts.map +1 -1
- package/dist/components/forms/input/types.d.ts +5 -0
- package/dist/components/forms/input/types.d.ts.map +1 -1
- package/dist/components/forms/select/Select.d.ts.map +1 -1
- package/dist/components/forms/select/types.d.ts +7 -1
- package/dist/components/forms/select/types.d.ts.map +1 -1
- package/dist/components/navigation/stepper/Stepper1.d.ts +4 -0
- package/dist/components/navigation/stepper/Stepper1.d.ts.map +1 -0
- package/dist/components/navigation/stepper/Stepper2.d.ts +5 -0
- package/dist/components/navigation/stepper/Stepper2.d.ts.map +1 -0
- package/dist/components/navigation/stepper/index.d.ts +4 -1
- package/dist/components/navigation/stepper/index.d.ts.map +1 -1
- package/dist/components/navigation/stepper/types.d.ts +85 -0
- package/dist/components/navigation/stepper/types.d.ts.map +1 -1
- package/dist/data-table.cjs +1 -1
- package/dist/data-table.mjs +1 -1
- package/dist/date-picker.cjs +1 -1
- package/dist/date-picker.mjs +1 -1
- package/dist/docs.cjs +10 -0
- package/dist/docs.cjs.map +1 -1
- package/dist/docs.d.ts.map +1 -1
- package/dist/docs.mjs +10 -0
- package/dist/docs.mjs.map +1 -1
- package/dist/foundation.css +7 -0
- package/dist/index.cjs +23 -18
- package/dist/index.d.ts +5 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +19 -19
- package/dist/input.cjs +1 -1
- package/dist/input.mjs +1 -1
- package/dist/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.mjs +1 -1
- package/dist/otp-input.cjs +1 -1
- package/dist/otp-input.mjs +1 -1
- package/dist/progress-bar.cjs +1 -1
- package/dist/progress-bar.mjs +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.mjs +1 -1
- package/dist/stepper.cjs +5 -1
- package/dist/stepper.mjs +2 -2
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.mjs +1 -1
- package/dist/tokens.css +11 -2
- package/package.json +4 -4
- package/dist/chunks/calendar-BarcG6x_.mjs.map +0 -1
- package/dist/chunks/calendar-xrGmvukr.cjs.map +0 -1
- package/dist/chunks/charts-BpElnsoR.cjs.map +0 -1
- package/dist/chunks/charts-DugYWvEf.mjs.map +0 -1
- package/dist/chunks/combobox-BXu3s0dt.cjs.map +0 -1
- package/dist/chunks/combobox-CjK-qG4k.mjs.map +0 -1
- package/dist/chunks/date-picker-D8gaaMlJ.mjs.map +0 -1
- package/dist/chunks/date-picker-W9om1j7A.cjs.map +0 -1
- package/dist/chunks/input-D9qZNqXV.cjs +0 -99
- package/dist/chunks/input-D9qZNqXV.cjs.map +0 -1
- package/dist/chunks/input-wNqevfQ4.mjs +0 -87
- package/dist/chunks/input-wNqevfQ4.mjs.map +0 -1
- package/dist/chunks/multi-select-combobox-ELSH_Xr4.mjs.map +0 -1
- package/dist/chunks/multi-select-combobox-UW0X15W7.cjs.map +0 -1
- package/dist/chunks/otp-input-B6zzOEqw.cjs.map +0 -1
- package/dist/chunks/otp-input-Bg4nQG6x.mjs.map +0 -1
- package/dist/chunks/select-D71tk6-I.mjs +0 -152
- package/dist/chunks/select-D71tk6-I.mjs.map +0 -1
- package/dist/chunks/select-WC_kPqUP.cjs +0 -158
- package/dist/chunks/select-WC_kPqUP.cjs.map +0 -1
- package/dist/chunks/stepper-D4yQsQB0.mjs +0 -261
- package/dist/chunks/stepper-D4yQsQB0.mjs.map +0 -1
- package/dist/chunks/stepper-fY-Sx72k.cjs +0 -267
- package/dist/chunks/stepper-fY-Sx72k.cjs.map +0 -1
- package/dist/chunks/textarea-CAUsyu4-.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-
|
|
1
|
+
{"version":3,"file":"card-C5_tFK6Q.cjs","names":[],"sources":["../../src/components/data-display/card/Card.tsx"],"sourcesContent":["import type { CardProps } from \"./types\";\n\nexport const Card = ({ title, description }: CardProps) => {\n return (\n <div className=\"ui\">\n <div className=\"backdrop-blur-xl bg-white/70 dark:bg-neutral-900/70 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg overflow-hidden sm:max-w-xs lg:max-w-sm xl:max-w-md\">\n <div className=\"px-6 py-4\">\n <h2 className=\"text-neutral-900 dark:text-white font-bold text-xl mb-2\">\n {title}\n </h2>\n <p className=\"text-neutral-700 dark:text-neutral-300 bg-transparent border-none rounded-none font-sans text-base\">\n {description}\n </p>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;AAEA,IAAa,QAAQ,EAAE,OAAO,kBAA6B;AACzD,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CACA;;GACF,CAAA;EACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-
|
|
1
|
+
{"version":3,"file":"card-Dh8wNv8N.mjs","names":[],"sources":["../../src/components/data-display/card/Card.tsx"],"sourcesContent":["import type { CardProps } from \"./types\";\n\nexport const Card = ({ title, description }: CardProps) => {\n return (\n <div className=\"ui\">\n <div className=\"backdrop-blur-xl bg-white/70 dark:bg-neutral-900/70 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg overflow-hidden sm:max-w-xs lg:max-w-sm xl:max-w-md\">\n <div className=\"px-6 py-4\">\n <h2 className=\"text-neutral-900 dark:text-white font-bold text-xl mb-2\">\n {title}\n </h2>\n <p className=\"text-neutral-700 dark:text-neutral-300 bg-transparent border-none rounded-none font-sans text-base\">\n {description}\n </p>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;AAEA,IAAa,QAAQ,EAAE,OAAO,kBAA6B;AACzD,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA,EACL,oBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CACA;;GACF,CAAA;EACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel-DJdqBVRK.mjs","names":[],"sources":["../../src/components/navigation/carousel/Carousel.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CarouselProps, CarouselAnimation } from \"./types\";\n\nconst variantStyles = {\n default: \"ui:bg-white ui:dark:bg-neutral-900 ui:shadow-xl\",\n glass:\n \"ui:bg-white/60 ui:dark:bg-neutral-900/50 ui:backdrop-blur-2xl ui:border ui:border-white/40 ui:dark:border-white/10\",\n minimal: \"ui:bg-transparent\",\n};\n\n// Animation variants for different carousel transitions\nconst getAnimationVariants = (animation: CarouselAnimation) => {\n const variants = {\n slide: {\n enter: (direction: number) => ({\n x: direction > 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: { x: 0, opacity: 1 },\n exit: (direction: number) => ({\n x: direction < 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n },\n fade: {\n enter: () => ({ opacity: 0 }),\n center: { opacity: 1 },\n exit: () => ({ opacity: 0 }),\n },\n scale: {\n enter: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction > 0 ? 50 : -50,\n }),\n center: { scale: 1, opacity: 1, x: 0 },\n exit: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction < 0 ? 50 : -50,\n }),\n },\n flip: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n opacity: 0,\n }),\n center: { rotateY: 0, opacity: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n opacity: 0,\n }),\n },\n cube: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n x: direction > 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n center: { rotateY: 0, x: 0, opacity: 1, scale: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n x: direction < 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n },\n cards: {\n enter: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction > 0 ? 100 : -100,\n rotateZ: direction > 0 ? 5 : -5,\n }),\n center: { scale: 1, opacity: 1, y: 0, rotateZ: 0 },\n exit: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction < 0 ? 100 : -100,\n rotateZ: direction < 0 ? 5 : -5,\n }),\n },\n };\n return variants[animation];\n};\n\n// Transition configs for each animation\nconst getTransitionConfig = (\n animation: CarouselAnimation,\n duration: number,\n) => {\n const durationSec = duration / 1000;\n const configs: Record<CarouselAnimation, object> = {\n slide: {\n x: { type: \"spring\", stiffness: 300, damping: 30 },\n opacity: { duration: durationSec },\n },\n fade: {\n opacity: { duration: durationSec, ease: \"easeInOut\" },\n },\n scale: {\n type: \"spring\",\n stiffness: 200,\n damping: 25,\n opacity: { duration: durationSec },\n },\n flip: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cube: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cards: {\n type: \"spring\",\n stiffness: 150,\n damping: 20,\n opacity: { duration: durationSec },\n },\n };\n return configs[animation];\n};\n\nexport const Carousel = ({\n items,\n className,\n autoPlay = 0,\n showArrows = true,\n showDots = true,\n infinite = true,\n pauseOnHover = true,\n animationDuration = 500,\n // gap and slidesPerView reserved for future multi-slide support\n gap: _gap = 0,\n slidesPerView: _slidesPerView = 1,\n renderArrow,\n renderDot,\n onSlideChange,\n variant = \"glass\",\n height = 400,\n style,\n initialSlide = 0,\n draggable = true,\n animation = \"slide\",\n}: CarouselProps) => {\n const animationVariants = getAnimationVariants(animation);\n const transitionConfig = getTransitionConfig(animation, animationDuration);\n const [[currentIndex, direction], setSlide] = useState([initialSlide, 0]);\n const [isPaused, setIsPaused] = useState(false);\n const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const totalSlides = items.length;\n\n const goToSlide = useCallback(\n (index: number, dir?: number) => {\n let newIndex = index;\n if (infinite) {\n if (index < 0) newIndex = totalSlides - 1;\n else if (index >= totalSlides) newIndex = 0;\n } else {\n if (index < 0) newIndex = 0;\n else if (index >= totalSlides) newIndex = totalSlides - 1;\n }\n const newDirection = dir ?? (newIndex > currentIndex ? 1 : -1);\n setSlide([newIndex, newDirection]);\n onSlideChange?.(newIndex);\n },\n [currentIndex, infinite, totalSlides, onSlideChange],\n );\n\n const goNext = useCallback(\n () => goToSlide(currentIndex + 1, 1),\n [currentIndex, goToSlide],\n );\n const goPrev = useCallback(\n () => goToSlide(currentIndex - 1, -1),\n [currentIndex, goToSlide],\n );\n\n // Auto-play\n useEffect(() => {\n if (autoPlay > 0 && !isPaused) {\n intervalRef.current = setInterval(goNext, autoPlay);\n }\n return () => {\n if (intervalRef.current) clearInterval(intervalRef.current);\n };\n }, [autoPlay, isPaused, goNext]);\n\n // Keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") goPrev();\n if (e.key === \"ArrowRight\") goNext();\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [goNext, goPrev]);\n\n // Drag handling\n const handleDragEnd = (\n _event: MouseEvent | TouchEvent | PointerEvent,\n info: {\n offset: { x: number; y: number };\n velocity: { x: number; y: number };\n },\n ) => {\n const threshold = 50;\n if (info.offset.x < -threshold) goNext();\n else if (info.offset.x > threshold) goPrev();\n };\n\n const currentItem = items[currentIndex];\n\n return (\n <div\n className={mergeClassNames(\n \"ui:relative ui:overflow-hidden ui:rounded-2xl ui:w-full\",\n variantStyles[variant],\n className,\n )}\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n ...style,\n }}\n onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n >\n {/* Slides */}\n <AnimatePresence initial={false} custom={direction} mode=\"wait\">\n <motion.div\n key={currentIndex}\n custom={direction}\n variants={animationVariants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transitionConfig}\n drag={draggable ? \"x\" : false}\n dragConstraints={{ left: 0, right: 0 }}\n dragElastic={0.2}\n onDragEnd={handleDragEnd}\n className=\"ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:cursor-grab active:ui:cursor-grabbing\"\n style={{\n perspective:\n animation === \"flip\" || animation === \"cube\" ? 1000 : undefined,\n }}\n >\n {currentItem.image ? (\n <div className=\"ui:relative ui:w-full ui:h-full\">\n <img\n src={currentItem.image}\n alt={currentItem.alt || currentItem.title || \"Carousel slide\"}\n className=\"ui:w-full ui:h-full ui:object-cover\"\n />\n {(currentItem.title || currentItem.description) && (\n <div className=\"ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:p-6 ui:bg-gradient-to-t ui:from-black/70 ui:to-transparent\">\n {currentItem.title && (\n <h3 className=\"ui:text-2xl ui:font-bold ui:text-white ui:mb-2\">\n {currentItem.title}\n </h3>\n )}\n {currentItem.description && (\n <p className=\"ui:text-white/80\">\n {currentItem.description}\n </p>\n )}\n </div>\n )}\n </div>\n ) : (\n <div className=\"ui:w-full ui:h-full ui:flex ui:items-center ui:justify-center ui:p-6\">\n {currentItem.content}\n </div>\n )}\n </motion.div>\n </AnimatePresence>\n\n {/* Navigation Arrows */}\n {showArrows && totalSlides > 1 && (\n <>\n {renderArrow ? (\n <>\n {renderArrow({ direction: \"prev\", onClick: goPrev })}\n {renderArrow({ direction: \"next\", onClick: goNext })}\n </>\n ) : (\n <>\n <motion.button\n type=\"button\"\n onClick={goPrev}\n className=\"ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Previous slide\"\n >\n <ChevronLeftIcon className=\"ui:w-6 ui:h-6\" aria-hidden=\"true\" />\n </motion.button>\n <motion.button\n type=\"button\"\n onClick={goNext}\n className=\"ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Next slide\"\n >\n <ChevronRightIcon\n className=\"ui:w-6 ui:h-6\"\n aria-hidden=\"true\"\n />\n </motion.button>\n </>\n )}\n </>\n )}\n\n {/* Dot Indicators */}\n {showDots && totalSlides > 1 && (\n <div className=\"ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:z-20 ui:flex ui:gap-2 ui:p-2 ui:rounded-full ui:bg-black/20 ui:dark:bg-white/10 ui:backdrop-blur-sm\">\n {items.map((_, index) =>\n renderDot ? (\n renderDot({\n index,\n active: index === currentIndex,\n onClick: () => goToSlide(index),\n })\n ) : (\n <motion.button\n key={index}\n type=\"button\"\n onClick={() => goToSlide(index)}\n className={mergeClassNames(\n \"ui:rounded-full ui:transition-all ui:duration-300\",\n index === currentIndex\n ? \"ui:w-8 ui:h-2.5 ui:bg-white ui:shadow-lg\"\n : \"ui:w-2.5 ui:h-2.5 ui:bg-white/60 hover:ui:bg-white/90\",\n )}\n whileHover={{ scale: 1.2 }}\n whileTap={{ scale: 0.9 }}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : undefined}\n />\n ),\n )}\n </div>\n )}\n\n {/* Progress indicator */}\n {autoPlay > 0 && !isPaused && (\n <motion.div\n className=\"ui:absolute ui:bottom-0 ui:left-0 ui:h-1 ui:bg-accent/80 ui:rounded-full\"\n initial={{ width: \"0%\" }}\n animate={{ width: \"100%\" }}\n transition={{ duration: autoPlay / 1000, ease: \"linear\" }}\n key={currentIndex}\n />\n )}\n </div>\n );\n};\n\nCarousel.displayName = \"Carousel\";\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"carousel-BYwqI4cA.mjs","names":[],"sources":["../../src/components/navigation/carousel/Carousel.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CarouselProps, CarouselAnimation } from \"./types\";\n\nconst variantStyles = {\n default: \"ui:bg-white ui:dark:bg-neutral-900 ui:shadow-xl\",\n glass:\n \"ui:bg-white/60 ui:dark:bg-neutral-900/50 ui:backdrop-blur-2xl ui:border ui:border-white/40 ui:dark:border-white/10\",\n minimal: \"ui:bg-transparent\",\n};\n\n// Animation variants for different carousel transitions\nconst getAnimationVariants = (animation: CarouselAnimation) => {\n const variants = {\n slide: {\n enter: (direction: number) => ({\n x: direction > 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: { x: 0, opacity: 1 },\n exit: (direction: number) => ({\n x: direction < 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n },\n fade: {\n enter: () => ({ opacity: 0 }),\n center: { opacity: 1 },\n exit: () => ({ opacity: 0 }),\n },\n scale: {\n enter: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction > 0 ? 50 : -50,\n }),\n center: { scale: 1, opacity: 1, x: 0 },\n exit: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction < 0 ? 50 : -50,\n }),\n },\n flip: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n opacity: 0,\n }),\n center: { rotateY: 0, opacity: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n opacity: 0,\n }),\n },\n cube: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n x: direction > 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n center: { rotateY: 0, x: 0, opacity: 1, scale: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n x: direction < 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n },\n cards: {\n enter: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction > 0 ? 100 : -100,\n rotateZ: direction > 0 ? 5 : -5,\n }),\n center: { scale: 1, opacity: 1, y: 0, rotateZ: 0 },\n exit: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction < 0 ? 100 : -100,\n rotateZ: direction < 0 ? 5 : -5,\n }),\n },\n };\n return variants[animation];\n};\n\n// Transition configs for each animation\nconst getTransitionConfig = (\n animation: CarouselAnimation,\n duration: number,\n) => {\n const durationSec = duration / 1000;\n const configs: Record<CarouselAnimation, object> = {\n slide: {\n x: { type: \"spring\", stiffness: 300, damping: 30 },\n opacity: { duration: durationSec },\n },\n fade: {\n opacity: { duration: durationSec, ease: \"easeInOut\" },\n },\n scale: {\n type: \"spring\",\n stiffness: 200,\n damping: 25,\n opacity: { duration: durationSec },\n },\n flip: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cube: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cards: {\n type: \"spring\",\n stiffness: 150,\n damping: 20,\n opacity: { duration: durationSec },\n },\n };\n return configs[animation];\n};\n\nexport const Carousel = ({\n items,\n className,\n autoPlay = 0,\n showArrows = true,\n showDots = true,\n infinite = true,\n pauseOnHover = true,\n animationDuration = 500,\n // gap and slidesPerView reserved for future multi-slide support\n gap: _gap = 0,\n slidesPerView: _slidesPerView = 1,\n renderArrow,\n renderDot,\n onSlideChange,\n variant = \"glass\",\n height = 400,\n style,\n initialSlide = 0,\n draggable = true,\n animation = \"slide\",\n}: CarouselProps) => {\n const animationVariants = getAnimationVariants(animation);\n const transitionConfig = getTransitionConfig(animation, animationDuration);\n const [[currentIndex, direction], setSlide] = useState([initialSlide, 0]);\n const [isPaused, setIsPaused] = useState(false);\n const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const totalSlides = items.length;\n\n const goToSlide = useCallback(\n (index: number, dir?: number) => {\n let newIndex = index;\n if (infinite) {\n if (index < 0) newIndex = totalSlides - 1;\n else if (index >= totalSlides) newIndex = 0;\n } else {\n if (index < 0) newIndex = 0;\n else if (index >= totalSlides) newIndex = totalSlides - 1;\n }\n const newDirection = dir ?? (newIndex > currentIndex ? 1 : -1);\n setSlide([newIndex, newDirection]);\n onSlideChange?.(newIndex);\n },\n [currentIndex, infinite, totalSlides, onSlideChange],\n );\n\n const goNext = useCallback(\n () => goToSlide(currentIndex + 1, 1),\n [currentIndex, goToSlide],\n );\n const goPrev = useCallback(\n () => goToSlide(currentIndex - 1, -1),\n [currentIndex, goToSlide],\n );\n\n // Auto-play\n useEffect(() => {\n if (autoPlay > 0 && !isPaused) {\n intervalRef.current = setInterval(goNext, autoPlay);\n }\n return () => {\n if (intervalRef.current) clearInterval(intervalRef.current);\n };\n }, [autoPlay, isPaused, goNext]);\n\n // Keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") goPrev();\n if (e.key === \"ArrowRight\") goNext();\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [goNext, goPrev]);\n\n // Drag handling\n const handleDragEnd = (\n _event: MouseEvent | TouchEvent | PointerEvent,\n info: {\n offset: { x: number; y: number };\n velocity: { x: number; y: number };\n },\n ) => {\n const threshold = 50;\n if (info.offset.x < -threshold) goNext();\n else if (info.offset.x > threshold) goPrev();\n };\n\n const currentItem = items[currentIndex];\n\n return (\n <div\n className={mergeClassNames(\n \"ui:relative ui:overflow-hidden ui:rounded-2xl ui:w-full\",\n variantStyles[variant],\n className,\n )}\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n ...style,\n }}\n onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n >\n {/* Slides */}\n <AnimatePresence initial={false} custom={direction} mode=\"wait\">\n <motion.div\n key={currentIndex}\n custom={direction}\n variants={animationVariants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transitionConfig}\n drag={draggable ? \"x\" : false}\n dragConstraints={{ left: 0, right: 0 }}\n dragElastic={0.2}\n onDragEnd={handleDragEnd}\n className=\"ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:cursor-grab active:ui:cursor-grabbing\"\n style={{\n perspective:\n animation === \"flip\" || animation === \"cube\" ? 1000 : undefined,\n }}\n >\n {currentItem.image ? (\n <div className=\"ui:relative ui:w-full ui:h-full\">\n <img\n src={currentItem.image}\n alt={currentItem.alt || currentItem.title || \"Carousel slide\"}\n className=\"ui:w-full ui:h-full ui:object-cover\"\n />\n {(currentItem.title || currentItem.description) && (\n <div className=\"ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:p-6 ui:bg-gradient-to-t ui:from-black/70 ui:to-transparent\">\n {currentItem.title && (\n <h3 className=\"ui:text-2xl ui:font-bold ui:text-white ui:mb-2\">\n {currentItem.title}\n </h3>\n )}\n {currentItem.description && (\n <p className=\"ui:text-white/80\">\n {currentItem.description}\n </p>\n )}\n </div>\n )}\n </div>\n ) : (\n <div className=\"ui:w-full ui:h-full ui:flex ui:items-center ui:justify-center ui:p-6\">\n {currentItem.content}\n </div>\n )}\n </motion.div>\n </AnimatePresence>\n\n {/* Navigation Arrows */}\n {showArrows && totalSlides > 1 && (\n <>\n {renderArrow ? (\n <>\n {renderArrow({ direction: \"prev\", onClick: goPrev })}\n {renderArrow({ direction: \"next\", onClick: goNext })}\n </>\n ) : (\n <>\n <motion.button\n type=\"button\"\n onClick={goPrev}\n className=\"ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Previous slide\"\n >\n <ChevronLeftIcon className=\"ui:w-6 ui:h-6\" aria-hidden=\"true\" />\n </motion.button>\n <motion.button\n type=\"button\"\n onClick={goNext}\n className=\"ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Next slide\"\n >\n <ChevronRightIcon\n className=\"ui:w-6 ui:h-6\"\n aria-hidden=\"true\"\n />\n </motion.button>\n </>\n )}\n </>\n )}\n\n {/* Dot Indicators */}\n {showDots && totalSlides > 1 && (\n <div className=\"ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:z-20 ui:flex ui:gap-2 ui:p-2 ui:rounded-full ui:bg-black/20 ui:dark:bg-white/10 ui:backdrop-blur-sm\">\n {items.map((_, index) =>\n renderDot ? (\n renderDot({\n index,\n active: index === currentIndex,\n onClick: () => goToSlide(index),\n })\n ) : (\n <motion.button\n key={index}\n type=\"button\"\n onClick={() => goToSlide(index)}\n className={mergeClassNames(\n \"ui:rounded-full ui:transition-all ui:duration-300\",\n index === currentIndex\n ? \"ui:w-8 ui:h-2.5 ui:bg-white ui:shadow-lg\"\n : \"ui:w-2.5 ui:h-2.5 ui:bg-white/60 hover:ui:bg-white/90\",\n )}\n whileHover={{ scale: 1.2 }}\n whileTap={{ scale: 0.9 }}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : undefined}\n />\n ),\n )}\n </div>\n )}\n\n {/* Progress indicator */}\n {autoPlay > 0 && !isPaused && (\n <motion.div\n className=\"ui:absolute ui:bottom-0 ui:left-0 ui:h-1 ui:bg-accent/80 ui:rounded-full\"\n initial={{ width: \"0%\" }}\n animate={{ width: \"100%\" }}\n transition={{ duration: autoPlay / 1000, ease: \"linear\" }}\n key={currentIndex}\n />\n )}\n </div>\n );\n};\n\nCarousel.displayName = \"Carousel\";\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel-Cq5uwqQt.cjs","names":[],"sources":["../../src/components/navigation/carousel/Carousel.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CarouselProps, CarouselAnimation } from \"./types\";\n\nconst variantStyles = {\n default: \"ui:bg-white ui:dark:bg-neutral-900 ui:shadow-xl\",\n glass:\n \"ui:bg-white/60 ui:dark:bg-neutral-900/50 ui:backdrop-blur-2xl ui:border ui:border-white/40 ui:dark:border-white/10\",\n minimal: \"ui:bg-transparent\",\n};\n\n// Animation variants for different carousel transitions\nconst getAnimationVariants = (animation: CarouselAnimation) => {\n const variants = {\n slide: {\n enter: (direction: number) => ({\n x: direction > 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: { x: 0, opacity: 1 },\n exit: (direction: number) => ({\n x: direction < 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n },\n fade: {\n enter: () => ({ opacity: 0 }),\n center: { opacity: 1 },\n exit: () => ({ opacity: 0 }),\n },\n scale: {\n enter: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction > 0 ? 50 : -50,\n }),\n center: { scale: 1, opacity: 1, x: 0 },\n exit: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction < 0 ? 50 : -50,\n }),\n },\n flip: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n opacity: 0,\n }),\n center: { rotateY: 0, opacity: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n opacity: 0,\n }),\n },\n cube: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n x: direction > 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n center: { rotateY: 0, x: 0, opacity: 1, scale: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n x: direction < 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n },\n cards: {\n enter: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction > 0 ? 100 : -100,\n rotateZ: direction > 0 ? 5 : -5,\n }),\n center: { scale: 1, opacity: 1, y: 0, rotateZ: 0 },\n exit: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction < 0 ? 100 : -100,\n rotateZ: direction < 0 ? 5 : -5,\n }),\n },\n };\n return variants[animation];\n};\n\n// Transition configs for each animation\nconst getTransitionConfig = (\n animation: CarouselAnimation,\n duration: number,\n) => {\n const durationSec = duration / 1000;\n const configs: Record<CarouselAnimation, object> = {\n slide: {\n x: { type: \"spring\", stiffness: 300, damping: 30 },\n opacity: { duration: durationSec },\n },\n fade: {\n opacity: { duration: durationSec, ease: \"easeInOut\" },\n },\n scale: {\n type: \"spring\",\n stiffness: 200,\n damping: 25,\n opacity: { duration: durationSec },\n },\n flip: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cube: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cards: {\n type: \"spring\",\n stiffness: 150,\n damping: 20,\n opacity: { duration: durationSec },\n },\n };\n return configs[animation];\n};\n\nexport const Carousel = ({\n items,\n className,\n autoPlay = 0,\n showArrows = true,\n showDots = true,\n infinite = true,\n pauseOnHover = true,\n animationDuration = 500,\n // gap and slidesPerView reserved for future multi-slide support\n gap: _gap = 0,\n slidesPerView: _slidesPerView = 1,\n renderArrow,\n renderDot,\n onSlideChange,\n variant = \"glass\",\n height = 400,\n style,\n initialSlide = 0,\n draggable = true,\n animation = \"slide\",\n}: CarouselProps) => {\n const animationVariants = getAnimationVariants(animation);\n const transitionConfig = getTransitionConfig(animation, animationDuration);\n const [[currentIndex, direction], setSlide] = useState([initialSlide, 0]);\n const [isPaused, setIsPaused] = useState(false);\n const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const totalSlides = items.length;\n\n const goToSlide = useCallback(\n (index: number, dir?: number) => {\n let newIndex = index;\n if (infinite) {\n if (index < 0) newIndex = totalSlides - 1;\n else if (index >= totalSlides) newIndex = 0;\n } else {\n if (index < 0) newIndex = 0;\n else if (index >= totalSlides) newIndex = totalSlides - 1;\n }\n const newDirection = dir ?? (newIndex > currentIndex ? 1 : -1);\n setSlide([newIndex, newDirection]);\n onSlideChange?.(newIndex);\n },\n [currentIndex, infinite, totalSlides, onSlideChange],\n );\n\n const goNext = useCallback(\n () => goToSlide(currentIndex + 1, 1),\n [currentIndex, goToSlide],\n );\n const goPrev = useCallback(\n () => goToSlide(currentIndex - 1, -1),\n [currentIndex, goToSlide],\n );\n\n // Auto-play\n useEffect(() => {\n if (autoPlay > 0 && !isPaused) {\n intervalRef.current = setInterval(goNext, autoPlay);\n }\n return () => {\n if (intervalRef.current) clearInterval(intervalRef.current);\n };\n }, [autoPlay, isPaused, goNext]);\n\n // Keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") goPrev();\n if (e.key === \"ArrowRight\") goNext();\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [goNext, goPrev]);\n\n // Drag handling\n const handleDragEnd = (\n _event: MouseEvent | TouchEvent | PointerEvent,\n info: {\n offset: { x: number; y: number };\n velocity: { x: number; y: number };\n },\n ) => {\n const threshold = 50;\n if (info.offset.x < -threshold) goNext();\n else if (info.offset.x > threshold) goPrev();\n };\n\n const currentItem = items[currentIndex];\n\n return (\n <div\n className={mergeClassNames(\n \"ui:relative ui:overflow-hidden ui:rounded-2xl ui:w-full\",\n variantStyles[variant],\n className,\n )}\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n ...style,\n }}\n onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n >\n {/* Slides */}\n <AnimatePresence initial={false} custom={direction} mode=\"wait\">\n <motion.div\n key={currentIndex}\n custom={direction}\n variants={animationVariants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transitionConfig}\n drag={draggable ? \"x\" : false}\n dragConstraints={{ left: 0, right: 0 }}\n dragElastic={0.2}\n onDragEnd={handleDragEnd}\n className=\"ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:cursor-grab active:ui:cursor-grabbing\"\n style={{\n perspective:\n animation === \"flip\" || animation === \"cube\" ? 1000 : undefined,\n }}\n >\n {currentItem.image ? (\n <div className=\"ui:relative ui:w-full ui:h-full\">\n <img\n src={currentItem.image}\n alt={currentItem.alt || currentItem.title || \"Carousel slide\"}\n className=\"ui:w-full ui:h-full ui:object-cover\"\n />\n {(currentItem.title || currentItem.description) && (\n <div className=\"ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:p-6 ui:bg-gradient-to-t ui:from-black/70 ui:to-transparent\">\n {currentItem.title && (\n <h3 className=\"ui:text-2xl ui:font-bold ui:text-white ui:mb-2\">\n {currentItem.title}\n </h3>\n )}\n {currentItem.description && (\n <p className=\"ui:text-white/80\">\n {currentItem.description}\n </p>\n )}\n </div>\n )}\n </div>\n ) : (\n <div className=\"ui:w-full ui:h-full ui:flex ui:items-center ui:justify-center ui:p-6\">\n {currentItem.content}\n </div>\n )}\n </motion.div>\n </AnimatePresence>\n\n {/* Navigation Arrows */}\n {showArrows && totalSlides > 1 && (\n <>\n {renderArrow ? (\n <>\n {renderArrow({ direction: \"prev\", onClick: goPrev })}\n {renderArrow({ direction: \"next\", onClick: goNext })}\n </>\n ) : (\n <>\n <motion.button\n type=\"button\"\n onClick={goPrev}\n className=\"ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Previous slide\"\n >\n <ChevronLeftIcon className=\"ui:w-6 ui:h-6\" aria-hidden=\"true\" />\n </motion.button>\n <motion.button\n type=\"button\"\n onClick={goNext}\n className=\"ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Next slide\"\n >\n <ChevronRightIcon\n className=\"ui:w-6 ui:h-6\"\n aria-hidden=\"true\"\n />\n </motion.button>\n </>\n )}\n </>\n )}\n\n {/* Dot Indicators */}\n {showDots && totalSlides > 1 && (\n <div className=\"ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:z-20 ui:flex ui:gap-2 ui:p-2 ui:rounded-full ui:bg-black/20 ui:dark:bg-white/10 ui:backdrop-blur-sm\">\n {items.map((_, index) =>\n renderDot ? (\n renderDot({\n index,\n active: index === currentIndex,\n onClick: () => goToSlide(index),\n })\n ) : (\n <motion.button\n key={index}\n type=\"button\"\n onClick={() => goToSlide(index)}\n className={mergeClassNames(\n \"ui:rounded-full ui:transition-all ui:duration-300\",\n index === currentIndex\n ? \"ui:w-8 ui:h-2.5 ui:bg-white ui:shadow-lg\"\n : \"ui:w-2.5 ui:h-2.5 ui:bg-white/60 hover:ui:bg-white/90\",\n )}\n whileHover={{ scale: 1.2 }}\n whileTap={{ scale: 0.9 }}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : undefined}\n />\n ),\n )}\n </div>\n )}\n\n {/* Progress indicator */}\n {autoPlay > 0 && !isPaused && (\n <motion.div\n className=\"ui:absolute ui:bottom-0 ui:left-0 ui:h-1 ui:bg-accent/80 ui:rounded-full\"\n initial={{ width: \"0%\" }}\n animate={{ width: \"100%\" }}\n transition={{ duration: autoPlay / 1000, ease: \"linear\" }}\n key={currentIndex}\n />\n )}\n </div>\n );\n};\n\nCarousel.displayName = \"Carousel\";\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"carousel-C1338X8h.cjs","names":[],"sources":["../../src/components/navigation/carousel/Carousel.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CarouselProps, CarouselAnimation } from \"./types\";\n\nconst variantStyles = {\n default: \"ui:bg-white ui:dark:bg-neutral-900 ui:shadow-xl\",\n glass:\n \"ui:bg-white/60 ui:dark:bg-neutral-900/50 ui:backdrop-blur-2xl ui:border ui:border-white/40 ui:dark:border-white/10\",\n minimal: \"ui:bg-transparent\",\n};\n\n// Animation variants for different carousel transitions\nconst getAnimationVariants = (animation: CarouselAnimation) => {\n const variants = {\n slide: {\n enter: (direction: number) => ({\n x: direction > 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: { x: 0, opacity: 1 },\n exit: (direction: number) => ({\n x: direction < 0 ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n },\n fade: {\n enter: () => ({ opacity: 0 }),\n center: { opacity: 1 },\n exit: () => ({ opacity: 0 }),\n },\n scale: {\n enter: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction > 0 ? 50 : -50,\n }),\n center: { scale: 1, opacity: 1, x: 0 },\n exit: (direction: number) => ({\n scale: 0.8,\n opacity: 0,\n x: direction < 0 ? 50 : -50,\n }),\n },\n flip: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n opacity: 0,\n }),\n center: { rotateY: 0, opacity: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n opacity: 0,\n }),\n },\n cube: {\n enter: (direction: number) => ({\n rotateY: direction > 0 ? 90 : -90,\n x: direction > 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n center: { rotateY: 0, x: 0, opacity: 1, scale: 1 },\n exit: (direction: number) => ({\n rotateY: direction < 0 ? 90 : -90,\n x: direction < 0 ? \"50%\" : \"-50%\",\n opacity: 0,\n scale: 0.8,\n }),\n },\n cards: {\n enter: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction > 0 ? 100 : -100,\n rotateZ: direction > 0 ? 5 : -5,\n }),\n center: { scale: 1, opacity: 1, y: 0, rotateZ: 0 },\n exit: (direction: number) => ({\n scale: 0.9,\n opacity: 0,\n y: direction < 0 ? 100 : -100,\n rotateZ: direction < 0 ? 5 : -5,\n }),\n },\n };\n return variants[animation];\n};\n\n// Transition configs for each animation\nconst getTransitionConfig = (\n animation: CarouselAnimation,\n duration: number,\n) => {\n const durationSec = duration / 1000;\n const configs: Record<CarouselAnimation, object> = {\n slide: {\n x: { type: \"spring\", stiffness: 300, damping: 30 },\n opacity: { duration: durationSec },\n },\n fade: {\n opacity: { duration: durationSec, ease: \"easeInOut\" },\n },\n scale: {\n type: \"spring\",\n stiffness: 200,\n damping: 25,\n opacity: { duration: durationSec },\n },\n flip: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cube: {\n type: \"spring\",\n stiffness: 100,\n damping: 20,\n opacity: { duration: durationSec * 0.5 },\n },\n cards: {\n type: \"spring\",\n stiffness: 150,\n damping: 20,\n opacity: { duration: durationSec },\n },\n };\n return configs[animation];\n};\n\nexport const Carousel = ({\n items,\n className,\n autoPlay = 0,\n showArrows = true,\n showDots = true,\n infinite = true,\n pauseOnHover = true,\n animationDuration = 500,\n // gap and slidesPerView reserved for future multi-slide support\n gap: _gap = 0,\n slidesPerView: _slidesPerView = 1,\n renderArrow,\n renderDot,\n onSlideChange,\n variant = \"glass\",\n height = 400,\n style,\n initialSlide = 0,\n draggable = true,\n animation = \"slide\",\n}: CarouselProps) => {\n const animationVariants = getAnimationVariants(animation);\n const transitionConfig = getTransitionConfig(animation, animationDuration);\n const [[currentIndex, direction], setSlide] = useState([initialSlide, 0]);\n const [isPaused, setIsPaused] = useState(false);\n const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const totalSlides = items.length;\n\n const goToSlide = useCallback(\n (index: number, dir?: number) => {\n let newIndex = index;\n if (infinite) {\n if (index < 0) newIndex = totalSlides - 1;\n else if (index >= totalSlides) newIndex = 0;\n } else {\n if (index < 0) newIndex = 0;\n else if (index >= totalSlides) newIndex = totalSlides - 1;\n }\n const newDirection = dir ?? (newIndex > currentIndex ? 1 : -1);\n setSlide([newIndex, newDirection]);\n onSlideChange?.(newIndex);\n },\n [currentIndex, infinite, totalSlides, onSlideChange],\n );\n\n const goNext = useCallback(\n () => goToSlide(currentIndex + 1, 1),\n [currentIndex, goToSlide],\n );\n const goPrev = useCallback(\n () => goToSlide(currentIndex - 1, -1),\n [currentIndex, goToSlide],\n );\n\n // Auto-play\n useEffect(() => {\n if (autoPlay > 0 && !isPaused) {\n intervalRef.current = setInterval(goNext, autoPlay);\n }\n return () => {\n if (intervalRef.current) clearInterval(intervalRef.current);\n };\n }, [autoPlay, isPaused, goNext]);\n\n // Keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") goPrev();\n if (e.key === \"ArrowRight\") goNext();\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [goNext, goPrev]);\n\n // Drag handling\n const handleDragEnd = (\n _event: MouseEvent | TouchEvent | PointerEvent,\n info: {\n offset: { x: number; y: number };\n velocity: { x: number; y: number };\n },\n ) => {\n const threshold = 50;\n if (info.offset.x < -threshold) goNext();\n else if (info.offset.x > threshold) goPrev();\n };\n\n const currentItem = items[currentIndex];\n\n return (\n <div\n className={mergeClassNames(\n \"ui:relative ui:overflow-hidden ui:rounded-2xl ui:w-full\",\n variantStyles[variant],\n className,\n )}\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n ...style,\n }}\n onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n >\n {/* Slides */}\n <AnimatePresence initial={false} custom={direction} mode=\"wait\">\n <motion.div\n key={currentIndex}\n custom={direction}\n variants={animationVariants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transitionConfig}\n drag={draggable ? \"x\" : false}\n dragConstraints={{ left: 0, right: 0 }}\n dragElastic={0.2}\n onDragEnd={handleDragEnd}\n className=\"ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:cursor-grab active:ui:cursor-grabbing\"\n style={{\n perspective:\n animation === \"flip\" || animation === \"cube\" ? 1000 : undefined,\n }}\n >\n {currentItem.image ? (\n <div className=\"ui:relative ui:w-full ui:h-full\">\n <img\n src={currentItem.image}\n alt={currentItem.alt || currentItem.title || \"Carousel slide\"}\n className=\"ui:w-full ui:h-full ui:object-cover\"\n />\n {(currentItem.title || currentItem.description) && (\n <div className=\"ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:p-6 ui:bg-gradient-to-t ui:from-black/70 ui:to-transparent\">\n {currentItem.title && (\n <h3 className=\"ui:text-2xl ui:font-bold ui:text-white ui:mb-2\">\n {currentItem.title}\n </h3>\n )}\n {currentItem.description && (\n <p className=\"ui:text-white/80\">\n {currentItem.description}\n </p>\n )}\n </div>\n )}\n </div>\n ) : (\n <div className=\"ui:w-full ui:h-full ui:flex ui:items-center ui:justify-center ui:p-6\">\n {currentItem.content}\n </div>\n )}\n </motion.div>\n </AnimatePresence>\n\n {/* Navigation Arrows */}\n {showArrows && totalSlides > 1 && (\n <>\n {renderArrow ? (\n <>\n {renderArrow({ direction: \"prev\", onClick: goPrev })}\n {renderArrow({ direction: \"next\", onClick: goNext })}\n </>\n ) : (\n <>\n <motion.button\n type=\"button\"\n onClick={goPrev}\n className=\"ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Previous slide\"\n >\n <ChevronLeftIcon className=\"ui:w-6 ui:h-6\" aria-hidden=\"true\" />\n </motion.button>\n <motion.button\n type=\"button\"\n onClick={goNext}\n className=\"ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n aria-label=\"Next slide\"\n >\n <ChevronRightIcon\n className=\"ui:w-6 ui:h-6\"\n aria-hidden=\"true\"\n />\n </motion.button>\n </>\n )}\n </>\n )}\n\n {/* Dot Indicators */}\n {showDots && totalSlides > 1 && (\n <div className=\"ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:z-20 ui:flex ui:gap-2 ui:p-2 ui:rounded-full ui:bg-black/20 ui:dark:bg-white/10 ui:backdrop-blur-sm\">\n {items.map((_, index) =>\n renderDot ? (\n renderDot({\n index,\n active: index === currentIndex,\n onClick: () => goToSlide(index),\n })\n ) : (\n <motion.button\n key={index}\n type=\"button\"\n onClick={() => goToSlide(index)}\n className={mergeClassNames(\n \"ui:rounded-full ui:transition-all ui:duration-300\",\n index === currentIndex\n ? \"ui:w-8 ui:h-2.5 ui:bg-white ui:shadow-lg\"\n : \"ui:w-2.5 ui:h-2.5 ui:bg-white/60 hover:ui:bg-white/90\",\n )}\n whileHover={{ scale: 1.2 }}\n whileTap={{ scale: 0.9 }}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : undefined}\n />\n ),\n )}\n </div>\n )}\n\n {/* Progress indicator */}\n {autoPlay > 0 && !isPaused && (\n <motion.div\n className=\"ui:absolute ui:bottom-0 ui:left-0 ui:h-1 ui:bg-accent/80 ui:rounded-full\"\n initial={{ width: \"0%\" }}\n animate={{ width: \"100%\" }}\n transition={{ duration: autoPlay / 1000, ease: \"linear\" }}\n key={currentIndex}\n />\n )}\n </div>\n );\n};\n\nCarousel.displayName = \"Carousel\";\n\nexport default Carousel;\n"],"mappings":"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"}
|