@jorgemadrid/open-carousel 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +148 -0
- package/dist/index.cjs +2529 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +618 -0
- package/dist/index.d.ts +618 -0
- package/dist/index.js +2471 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +102 -0
- package/package.json +71 -0
package/dist/styles.css
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/* Core Carousel Styles */
|
|
2
|
+
|
|
3
|
+
.base-carousel-container {
|
|
4
|
+
position: relative;
|
|
5
|
+
width: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.base-carousel {
|
|
9
|
+
display: flex;
|
|
10
|
+
overflow-x: auto;
|
|
11
|
+
scroll-behavior: smooth;
|
|
12
|
+
-webkit-overflow-scrolling: touch;
|
|
13
|
+
scrollbar-width: none;
|
|
14
|
+
-ms-overflow-style: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.base-carousel::-webkit-scrollbar {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.base-carousel.dragging {
|
|
22
|
+
scroll-behavior: auto;
|
|
23
|
+
cursor: grabbing;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.carousel-item {
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
/* Width is applied via inline style to support itemWidthVar prop */
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Dynamic width utility for collections */
|
|
32
|
+
.w-\[var\(--carousel-item-width-collection\)\] { width: var(--carousel-item-width-collection) !important; }
|
|
33
|
+
|
|
34
|
+
/* Polyfill Tailwind Snap Utilities */
|
|
35
|
+
.snap-center { scroll-snap-align: center; }
|
|
36
|
+
.snap-start { scroll-snap-align: start; }
|
|
37
|
+
.snap-stop-always { scroll-snap-stop: always; }
|
|
38
|
+
.snap-x { scroll-snap-type: x mandatory; }
|
|
39
|
+
.snap-mandatory { scroll-snap-type: x mandatory; }
|
|
40
|
+
.snap-proximity { scroll-snap-type: x proximity; }
|
|
41
|
+
|
|
42
|
+
/* Arrow Buttons */
|
|
43
|
+
.carousel-button {
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 50%;
|
|
46
|
+
transform: translateY(-50%);
|
|
47
|
+
z-index: 10;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
width: 40px;
|
|
52
|
+
height: 40px;
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
border: none;
|
|
55
|
+
background: rgba(255, 255, 255, 0.9);
|
|
56
|
+
color: #333;
|
|
57
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
transition: all 0.2s ease;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.carousel-button:hover {
|
|
63
|
+
background: white;
|
|
64
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
65
|
+
transform: translateY(-50%) scale(1.05);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.carousel-button:active {
|
|
69
|
+
transform: translateY(-50%) scale(0.95);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.carousel-button svg {
|
|
73
|
+
width: 24px;
|
|
74
|
+
height: 24px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.carousel-button.prev { left: 8px; }
|
|
78
|
+
.carousel-button.next { right: 8px; }
|
|
79
|
+
|
|
80
|
+
@media (min-width: 768px) {
|
|
81
|
+
.carousel-button { width: 48px; height: 48px; }
|
|
82
|
+
.carousel-button svg { width: 28px; height: 28px; }
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (min-width: 1024px) {
|
|
86
|
+
.carousel-button { width: 52px; height: 52px; }
|
|
87
|
+
.carousel-button svg { width: 32px; height: 32px; }
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/*
|
|
91
|
+
* CSS Variables - Define these in your app's CSS:
|
|
92
|
+
*
|
|
93
|
+
* :root {
|
|
94
|
+
* --carousel-item-width-default: 200px;
|
|
95
|
+
* --carousel-item-width-review: 250px;
|
|
96
|
+
* --carousel-item-width-compact: 150px;
|
|
97
|
+
* --carousel-item-width-collection: 100px;
|
|
98
|
+
* }
|
|
99
|
+
*
|
|
100
|
+
* Use media queries for responsive widths:
|
|
101
|
+
* @media (min-width: 768px) { :root { --carousel-item-width-default: 280px; } }
|
|
102
|
+
*/
|
package/package.json
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@jorgemadrid/open-carousel",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "A high-performance infinite scroll carousel for React",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"publishConfig": {
|
|
7
|
+
"access": "public"
|
|
8
|
+
},
|
|
9
|
+
"main": "./dist/index.cjs",
|
|
10
|
+
"module": "./dist/index.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/index.js",
|
|
16
|
+
"require": "./dist/index.cjs"
|
|
17
|
+
},
|
|
18
|
+
"./styles.css": "./dist/styles.css"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist"
|
|
22
|
+
],
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "tsup",
|
|
25
|
+
"dev": "tsup --watch",
|
|
26
|
+
"demo": "vite demo",
|
|
27
|
+
"build:demo": "vite build",
|
|
28
|
+
"predeploy": "npm run build:demo",
|
|
29
|
+
"deploy": "gh-pages -d dist-demo",
|
|
30
|
+
"test": "vitest run",
|
|
31
|
+
"test:watch": "vitest",
|
|
32
|
+
"typecheck": "tsc --noEmit",
|
|
33
|
+
"prepare": "npm run build"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"carousel",
|
|
37
|
+
"react",
|
|
38
|
+
"infinite-scroll",
|
|
39
|
+
"slider",
|
|
40
|
+
"swiper"
|
|
41
|
+
],
|
|
42
|
+
"author": "jorgemadridportillo",
|
|
43
|
+
"license": "MIT",
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "https://github.com/jorgemadridportillo/open-carousel.git"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
50
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
51
|
+
},
|
|
52
|
+
"dependencies": {
|
|
53
|
+
"clsx": "^2.1.1",
|
|
54
|
+
"i18next": "^25.8.4",
|
|
55
|
+
"react-i18next": "^16.5.4"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
59
|
+
"@testing-library/react": "^16.2.0",
|
|
60
|
+
"@types/node": "^25.2.1",
|
|
61
|
+
"@types/react": "^18.3.18",
|
|
62
|
+
"@types/react-dom": "^18.3.5",
|
|
63
|
+
"@vitejs/plugin-react": "^5.1.3",
|
|
64
|
+
"gh-pages": "^6.3.0",
|
|
65
|
+
"jsdom": "^26.0.0",
|
|
66
|
+
"tsup": "^8.3.6",
|
|
67
|
+
"typescript": "^5.7.3",
|
|
68
|
+
"vite": "^7.3.1",
|
|
69
|
+
"vitest": "^3.0.5"
|
|
70
|
+
}
|
|
71
|
+
}
|