npm - @haventmet/carousel - Versions diffs - 1.0.0 → 1.0.2 - Mend

@haventmet/carousel 1.0.0 → 1.0.2

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.

Files changed (72) hide show

package/README.md +36 -43
package/dist/carousel.css +1 -0
package/dist/carousel.d.ts +17 -0
package/dist/carousel.js +387 -0
package/dist/carousel.umd.cjs +1 -0
package/dist/index.d.ts +1 -0
package/package.json +29 -17
package/.mcp.json +0 -8
package/CLAUDE.md +0 -177
package/LICENSE +0 -21
package/biome.json +0 -174
package/packages/alpine/index.html +0 -50
package/packages/alpine/package.json +0 -70
package/packages/alpine/src/index.ts +0 -46
package/packages/alpine/style.css +0 -76
package/packages/alpine/tsconfig.json +0 -28
package/packages/alpine/vite.config.ts +0 -28
package/packages/core/README.md +0 -69
package/packages/core/package.json +0 -45
package/packages/core/src/carousel.ts +0 -842
package/packages/core/src/index.ts +0 -2
package/packages/core/src/style.css +0 -46
package/packages/core/vite.config.js +0 -14
package/packages/react/.vite/deps/_metadata.json +0 -25
package/packages/react/.vite/deps/chunk-7CQ73C3Q.js +0 -1908
package/packages/react/.vite/deps/chunk-7CQ73C3Q.js.map +0 -7
package/packages/react/.vite/deps/package.json +0 -3
package/packages/react/.vite/deps/react-dom_client.js +0 -21712
package/packages/react/.vite/deps/react-dom_client.js.map +0 -7
package/packages/react/.vite/deps/react.js +0 -4
package/packages/react/.vite/deps/react.js.map +0 -7
package/packages/react/README.md +0 -75
package/packages/react/index.html +0 -12
package/packages/react/package.json +0 -74
package/packages/react/src/App.tsx +0 -38
package/packages/react/src/BlossomCarousel.tsx +0 -77
package/packages/react/src/index.ts +0 -2
package/packages/react/src/main.jsx +0 -6
package/packages/react/src/style.css +0 -50
package/packages/react/tsconfig.json +0 -17
package/packages/react/vite.config.js +0 -27
package/packages/svelte/README.md +0 -58
package/packages/svelte/index.html +0 -12
package/packages/svelte/package.json +0 -71
package/packages/svelte/src/App.svelte +0 -12
package/packages/svelte/src/BlossomCarousel.svelte +0 -39
package/packages/svelte/src/BlossomCarousel.svelte.d.ts +0 -8
package/packages/svelte/src/index.ts +0 -2
package/packages/svelte/src/main.js +0 -10
package/packages/svelte/src/style.css +0 -52
package/packages/svelte/tsconfig.json +0 -16
package/packages/svelte/vite.config.js +0 -45
package/packages/vue/README.md +0 -70
package/packages/vue/index.html +0 -12
package/packages/vue/package.json +0 -69
package/packages/vue/src/App.vue +0 -82
package/packages/vue/src/BlossomCarousel.vue +0 -52
package/packages/vue/src/index.ts +0 -2
package/packages/vue/src/main.js +0 -5
package/packages/vue/src/style.css +0 -18
package/packages/vue/vite.config.js +0 -25
package/packages/web/README.md +0 -44
package/packages/web/index.html +0 -29
package/packages/web/package.json +0 -65
package/packages/web/src/index.ts +0 -27
package/packages/web/src/style.css +0 -53
package/packages/web/style.css +0 -54
package/packages/web/tsconfig.json +0 -18
package/packages/web/vite.config.ts +0 -23
package/pnpm-workspace.yaml +0 -8
package/public/cover.jpg +0 -0
package/turbo.json +0 -12

package/packages/svelte/tsconfig.json DELETED Viewed

@@ -1,16 +0,0 @@
-{
-	"compilerOptions": {
-		"moduleResolution": "bundler",
-		"allowSyntheticDefaultImports": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["src/*"],
-			"@numbered/carousel": ["../core/src/index.ts"]
-		},
-		"types": ["svelte"]
-	},
-	"include": ["src/**/*"]
-}

package/packages/svelte/vite.config.js DELETED Viewed

@@ -1,45 +0,0 @@
-import path from 'node:path'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-export default defineConfig({
-	plugins: [
-		svelte({
-			compilerOptions: {
-				// Ensure proper component compilation for Svelte 5
-				generate: 'dom',
-			},
-		}),
-		dts({
-			insertTypesEntry: true,
-			include: ['src/**/*'],
-			exclude: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
-		}),
-	],
-	build: {
-		lib: {
-			entry: path.resolve(__dirname, 'src/index.ts'),
-			name: 'BlossomCarousel',
-			fileName: 'blossom-carousel-svelte',
-			formats: ['es', 'umd'], // ES modules and UMD for broader compatibility
-		},
-		rollupOptions: {
-			external: [
-				'svelte',
-				'svelte/internal',
-				'svelte/store',
-				'@numbered/carousel',
-				/^svelte\//, // Match any svelte/* imports
-			],
-			output: {
-				preserveModules: false,
-				exports: 'named',
-				globals: {
-					svelte: 'svelte',
-					'@numbered/carousel': 'BlossomCarouselCore',
-				},
-			},
-		},
-	},
-})

package/packages/vue/README.md DELETED Viewed

@@ -1,70 +0,0 @@
-# Blossom Carousel
-A native-scroll-first carousel enhanced with drag support for Vue.
-## Installation
-`npm install @numbered/carousel/vue`
-#### Vue
-```javascript
-import { BlossomCarousel } from "@numbered/carousel/vue";
-import "@numbered/carousel/core/style.css";
-const app = createApp({});
-app.component("BlossomCarousel", BlossomCarousel);
-```
-#### Nuxt
-Install globally `plugins/blossom-carousel.js`
-```javascript
-import { BlossomCarousel } from "@numbered/carousel/vue";
-import "@numbered/carousel/core/style.css";
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component("BlossomCarousel", BlossomCarousel);
-});
-```
-## Usage
-```html
-<BlossomCarousel>
-  <div v-for="i in 12">Slide {{ i }}</div>
-</BlossomCarousel>
-```
-### as
-Define the HTMLElement of the carousel root.
-```html
-<BlossomCarousel as="ul">
-  <li v-for="i in 12">Slide {{ i }}</li>
-</BlossomCarousel>
-```
-Renders as
-```html
-<ul>
-  <li>Slide 1</li>
-  <li>Slide 2</li>
-  <li>Slide 3</li>
-  ...
-</ul>
-```
-## 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/vue/index.html DELETED Viewed

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Blossom Vue</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

package/packages/vue/package.json DELETED Viewed

@@ -1,69 +0,0 @@
-{
-	"name": "@haventmet/carousel-vue",
-	"version": "0.1.9",
-	"author": "Loris",
-	"license": "MIT",
-	"description": "A native-scroll-first carousel component for Vue.",
-	"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",
-	"keywords": [
-		"blossom",
-		"carousel",
-		"slider",
-		"slideshow",
-		"scroll",
-		"scroller",
-		"drag",
-		"dragging",
-		"js",
-		"vanilla",
-		"javascript",
-		"typescript",
-		"web",
-		"html",
-		"css",
-		"svelte",
-		"react",
-		"vue"
-	],
-	"type": "module",
-	"files": [
-		"dist"
-	],
-	"main": "dist/blossom-carousel-vue.umd.cjs",
-	"module": "dist/blossom-carousel-vue.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/blossom-carousel-vue.js",
-			"require": "./dist/blossom-carousel-vue.umd.cjs"
-		},
-		"./style.css": "./dist/blossom-carousel-vue.css"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"dev": "vite",
-		"build": "vite build",
-		"preview": "vite preview"
-	},
-	"peerDependencies": {
-		"vue": "^3.5.13"
-	},
-	"devDependencies": {
-		"@vitejs/plugin-vue": "^5.2.4",
-		"vite": "^6.3.5",
-		"vite-plugin-dts": "^4.5.4"
-	},
-	"dependencies": {
-		"@haventmet/carousel": "workspace:*"
-	}
-}

package/packages/vue/src/App.vue DELETED Viewed

@@ -1,82 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import BlossomCarousel from "./BlossomCarousel.vue";
-import "@numbered/carousel/style.css";
-const carousel = ref(null);
-</script>
-<template>
-  <div class="page">
-    <h1>Blossom Vue</h1>
-    <div class="buttons">
-      <button @click="carousel?.prev()">Prev</button>
-      <button @click="carousel?.next()">Next</button>
-    </div>
-    <BlossomCarousel ref="carousel" class="carousel">
-      <ul class="track">
-        <li v-for="i in 12" :key="`slide${i}`" class="slide">
-          {{ i }}
-        </li>
-      </ul>
-    </BlossomCarousel>
-  </div>
-</template>
-<style scoped>
-.page {
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-.carousel {
-  padding-inline: 1rem;
-  scroll-padding-inline: 1rem;
-  scroll-snap-type: x mandatory;
-  scroll-snap-stop: always;
-  padding-block: 4rem;
-  margin-block: -4rem;
-}
-.track {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 300px;
-  grid-gap: 1rem;
-}
-.slide {
-  width: 100%;
-  aspect-ratio: 3/4;
-  border-radius: 1rem;
-  background-color: #404040;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  scroll-snap-align: center;
-}
-.buttons {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-button {
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  border: 1px solid #404040;
-  background-color: #303030;
-  color: white;
-  cursor: pointer;
-}
-button:hover {
-  background-color: #404040;
-}
-</style>

package/packages/vue/src/BlossomCarousel.vue DELETED Viewed

@@ -1,52 +0,0 @@
-<template>
-  <component :is="as" ref="root" blossom-carousel="true">
-    <slot />
-  </component>
-</template>
-<script setup>
-import { onMounted, onBeforeUnmount, shallowRef } from "vue";
-const props = defineProps({
-  as: {
-    type: String,
-    default: "div",
-  },
-  repeat: {
-    type: Boolean,
-    default: false,
-  },
-  load: {
-    type: String,
-    default: "conditional",
-  },
-});
-const root = shallowRef(null);
-let blossom;
-defineExpose({
-  el: root,
-  next: () => blossom?.next(),
-  prev: () => blossom?.prev(),
-  currentIndex: () => blossom?.currentIndex(),
-});
-onMounted(async () => {
-  const hasMouse = window.matchMedia(
-    "(hover: hover) and (pointer: fine)"
-  ).matches;
-  // don't load if the user has no mouse.
-  // overwritten by props.load: 'always'
-  if (!hasMouse && props.load !== "always") return;
-  const { Blossom } = await import("@numbered/carousel");
-  blossom = Blossom(root.value, { repeat: props.repeat });
-  blossom.init();
-});
-onBeforeUnmount(() => {
-  blossom?.destroy();
-});
-</script>

package/packages/vue/src/index.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import BlossomCarousel from "./BlossomCarousel.vue";
2	- export { BlossomCarousel };

package/packages/vue/src/main.js DELETED Viewed

@@ -1,5 +0,0 @@
-import { createApp } from "vue";
-import "./style.css";
-import App from "./App.vue";
-createApp(App).mount("#app");

package/packages/vue/src/style.css DELETED Viewed

@@ -1,18 +0,0 @@
-: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;
-}

package/packages/vue/vite.config.js DELETED Viewed

@@ -1,25 +0,0 @@
-import path from 'node:path'
-import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-export default defineConfig({
-	plugins: [vue(), dts()],
-	build: {
-		lib: {
-			entry: path.resolve(__dirname, 'src/index.ts'),
-			name: 'BlossomCarousel',
-			fileName: 'blossom-carousel-vue',
-		},
-		rollupOptions: {
-			// Don't bundle Vue, expect the app to provide it
-			external: ['vue', '@numbered/carousel'],
-			output: {
-				globals: {
-					vue: 'Vue',
-					'@numbered/carousel': 'BlossomCarouselCore',
-				},
-			},
-		},
-	},
-})

package/packages/web/README.md DELETED Viewed

@@ -1,44 +0,0 @@
-# Blossom Carousel
-A native-scroll-first carousel enhanced with drag support for Web.
-## Installation
-`npm install @numbered/carousel/web`
-```javascript
-import { BlossomCarousel } from "@numbered/carousel/web";
-import "@numbered/carousel/core/style.css";
-```
-#### CDN
-```html
-<script src="https://unpkg.com/@numbered/carousel/web@0.0.11/dist/blossom-carousel-web.umd.cjs"></script>
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@numbered/carousel/web@0.0.11/dist/blossom-carousel-web.umd.cjs"
-/>
-```
-## Usage
-```html
-<blossom-carousel>
-  <div>Slide 1</div>
-  <div>Slide 2</div>
-  <div>Slide 3</div>
-  ...
-</blossom-carousel>
-```
-## 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/web/index.html DELETED Viewed

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Blossom Carousel Web Component</title>
-    <link rel="stylesheet" href="./style.css" />
-  </head>
-  <body>
-    <div class="page">
-      <h1>Blossom in Web Component</h1>
-      <blossom-carousel class="carousel">
-        <div class="slide">1</div>
-        <div class="slide">2</div>
-        <div class="slide">3</div>
-        <div class="slide">4</div>
-        <div class="slide">5</div>
-        <div class="slide">6</div>
-        <div class="slide">7</div>
-        <div class="slide">8</div>
-        <div class="slide">9</div>
-        <div class="slide">10</div>
-        <div class="slide">11</div>
-        <div class="slide">12</div>
-      </blossom-carousel>
-    </div>
-    <script type="module" src="src/index.ts"></script>
-  </body>
-</html>

package/packages/web/package.json DELETED Viewed

@@ -1,65 +0,0 @@
-{
-	"name": "@haventmet/carousel-web",
-	"version": "0.1.8",
-	"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",
-	"keywords": [
-		"blossom",
-		"carousel",
-		"slider",
-		"slideshow",
-		"scroll",
-		"scroller",
-		"drag",
-		"dragging",
-		"js",
-		"vanilla",
-		"javascript",
-		"typescript",
-		"web",
-		"html",
-		"css",
-		"svelte",
-		"react",
-		"vue"
-	],
-	"type": "module",
-	"files": [
-		"dist"
-	],
-	"main": "dist/blossom-carousel-web.umd.cjs",
-	"module": "dist/blossom-carousel-web.js",
-	"types": "dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/blossom-carousel-web.js",
-			"require": "./dist/blossom-carousel-web.umd.cjs"
-		},
-		"./style.css": "./dist/blossom-carousel-web.css"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"dev": "vite",
-		"build": "vite build",
-		"preview": "vite preview"
-	},
-	"devDependencies": {
-		"typescript": "^5.0.0",
-		"vite": "^4.0.0"
-	},
-	"dependencies": {
-		"@haventmet/carousel": "workspace:*"
-	}
-}

package/packages/web/src/index.ts DELETED Viewed

@@ -1,27 +0,0 @@
-import { Blossom } from '@numbered/carousel'
-import './style.css'
-export class BlossomCarousel extends HTMLElement {
-	private carouselInstance!: ReturnType<typeof Blossom>
-	constructor() {
-		super()
-		const shadow = this.attachShadow({ mode: 'open' })
-		this.setAttribute('blossom-carousel', 'true')
-		const slot = document.createElement('slot')
-		shadow.appendChild(slot)
-	}
-	connectedCallback(): void {
-		this.carouselInstance = Blossom(this, {
-			repeat: false, // this.hasAttribute("repeat"),
-		})
-		this.carouselInstance.init()
-	}
-	disconnectedCallback(): void {
-		this.carouselInstance.destroy()
-	}
-}
-customElements.define('blossom-carousel', BlossomCarousel)

package/packages/web/src/style.css DELETED Viewed

@@ -1,53 +0,0 @@
-:host {
-  display: inline-block;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: clip;
-  scroll-behavior: smooth;
-  overscroll-behavior-x: contain;
-  list-style-type: none;
-  inline-size: 100%;
-  max-inline-size: 100vw;
-  box-sizing: border-box;
-  /* hide scrollbar */
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* &[has-repeat="true"] {
-      scroll-padding: 0 50% !important;
-      padding: 0 50% !important;
-    } */
-  &[has-snap="true"] {
-    scroll-snap-type: var(--snap-type) !important;
-  }
-  &[has-overflow="true"] {
-    cursor: grab;
-    &:active {
-      cursor: grabbing;
-      /* disable snapping when dragging */
-      @media (pointer: fine) {
-        scroll-snap-type: none !important;
-      }
-    }
-  }
-  & > * {
-    display: inline-block;
-    white-space: initial;
-    vertical-align: top;
-  }
-  /* prevent drag interaction on children */
-  & * {
-    -webkit-user-drag: none;
-    -webkit-touch-callout: none;
-    user-select: none;
-  }
-}

package/packages/web/style.css DELETED Viewed

@@ -1,54 +0,0 @@
-@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;
-}
-.page {
-	height: 100vh;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-}
-.carousel {
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: 300px;
-	gap: 1rem;
-	padding-inline: 1rem;
-	scroll-padding-inline: 1rem;
-	scroll-snap-type: x mandatory;
-	scroll-snap-stop: always;
-	padding-block: 4rem;
-	margin-block: -4rem;
-}
-.slide {
-	width: 100%;
-	aspect-ratio: 3/4;
-	border-radius: 1rem;
-	background-color: #404040;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	scroll-snap-align: center;
-}