@haventmet/carousel 1.0.0

package/packages/alpine/style.css

@@ -0,0 +1,76 @@
+@import "@numbered/carousel/core/style.css";
+
+:root {
+	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+	color: rgba(255, 255, 255, 0.87);
+	background-color: #242424;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	margin: 0;
+}
+
+.wrapper {
+	width: 100%;
+	text-align: center;
+}
+
+.page {
+	height: 100vh;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	overflow: clip;
+	box-sizing: border-box;
+}
+
+.carousel {
+	display: flex;
+	gap: 1rem;
+	scroll-snap-type: x mandatory;
+	scroll-snap-stop: always;
+	width: 100%;
+	/* scroll-padding: 4rem; */
+	padding-inline: 50% !important;
+}
+
+.slide {
+	flex-shrink: 0;
+	width: 300px;
+	aspect-ratio: 3/4;
+	border-radius: 1rem;
+	background-color: #404040;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* scroll-snap-align: center; */
+
+	@media (max-width: 767px) {
+		scroll-snap-align: center;
+		background-color: #606060;
+	}
+
+	@media (min-width: 768px) {
+		&:nth-child(2n+1) {
+			scroll-snap-align: center;
+			background-color: #606060;
+		}
+	}
+}
+
+.controls {
+	display: flex;
+	justify-content: center;
+	gap: 0.5rem;
+}

package/packages/alpine/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+
+		/* Workspace paths */
+		"paths": {
+			"@numbered/carousel": ["../core/src/index.ts"]
+		}
+	},
+	"include": ["src", "index.ts"]
+}

package/packages/alpine/vite.config.ts

@@ -0,0 +1,28 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+	plugins: [dts()],
+	resolve: {
+		alias: {
+			'@numbered/carousel/style.css': path.resolve(__dirname, '../core/dist/carousel.css'),
+		},
+	},
+	build: {
+		lib: {
+			entry: path.resolve(__dirname, 'src/index.ts'),
+			name: 'BlossomCarousel',
+			fileName: 'blossom-carousel-alpine',
+		},
+		rollupOptions: {
+			external: ['alpinejs', '@numbered/carousel'],
+			output: {
+				globals: {
+					alpinejs: 'Alpine',
+					'@numbered/carousel': 'BlossomCarouselCore',
+				},
+			},
+		},
+	},
+})

package/packages/core/README.md

@@ -0,0 +1,69 @@
+# Blossom Core
+
+A native-scroll-first carousel for the web.
+
+## Installation
+
+Add the blossom-carousel package to your project.
+
+```bash
+npm install @numbered/carousel/core
+```
+
+Then, create a Blossom instance and initialize it.
+
+```js
+import { Blossom } from "@numbered/carousel/core";
+import "@numbered/carousel/core/style.css";
+
+const element = document.querySelector("#my-carousel-element");
+// prepare the Blossom carousel
+const blossom = Blossom(element);
+// initialize whenever you want
+blossom.init();
+```
+
+## Lazy loading
+
+Load Blossom only when needed.
+
+```js
+const hasMouse = window.matchMedia(
+  "(hover: hover) and (pointer: fine)"
+).matches;
+
+// We don't need Blossom's engine on touch devices
+if (!hasMouse) return;
+
+const { Blossom } = await import("@numbered/carousel/core");
+
+const element = document.querySelector("#my-carousel-element");
+const blossom = Blossom(element);
+blossom.init();
+```
+
+### Destroy
+
+Destroy the Blossom instance when you no longer need it to free up resources.
+
+```js
+blossom.destroy();
+```
+
+### Get started in your favorite framework:
+
+- [React](https://www.npmjs.com/package/@numbered/carousel/react)
+- [Vue](https://www.npmjs.com/package/@numbered/carousel/vue)
+- [Svelte](https://www.npmjs.com/package/@numbered/carousel/svelte)
+- [Web Component](https://www.npmjs.com/package/@numbered/carousel/web)
+
+## Examples
+
+- [Simple](https://www.blossom-carousel.com/docs/examples#simple)
+- [Variable widths](https://www.blossom-carousel.com/docs/examples#variable-widths)
+- [CSS Grid](https://www.blossom-carousel.com/docs/examples#css-grid)
+- [Multiple rows](https://www.blossom-carousel.com/docs/examples#multiple-rows)
+- [Snapping](https://www.blossom-carousel.com/docs/examples#snapping)
+- [Grouping](https://www.blossom-carousel.com/docs/examples#grouping)
+- [Sticky](https://www.blossom-carousel.com/docs/examples#sticky)
+- [Coverflow](https://www.blossom-carousel.com/docs/examples#cover-flow)

package/packages/core/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@haventmet/carousel",
+	"version": "0.1.9",
+	"author": "Loris",
+	"license": "MIT",
+	"description": "A native-scroll-first carousel component for the web.",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/loris-numbered/carousel"
+	},
+	"bugs": {
+		"url": "https://github.com/loris-numbered/carousel/issues"
+	},
+	"homepage": "https://www.blossom-carousel.com",
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"main": "dist/carousel.umd.cjs",
+	"module": "dist/carousel.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/carousel.js",
+			"require": "./dist/carousel.umd.cjs"
+		},
+		"./style.css": "./dist/carousel.css"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"tsup": "^6.0.0"
+	},
+	"dependencies": {
+		"vite": "^6.3.3",
+		"vite-plugin-dts": "^4.5.3"
+	}
+}