diff --git a/README.md b/README.md
index f2efd1d..4a04079 100644
--- a/README.md
+++ b/README.md
@@ -157,16 +157,3 @@ It provides auto generated dots for the carousel.
| Prop | Type | Default | Required |
| --------- | ------ | ------- | -------- |
| className | string | | No |
-
-### TODO:
-
-- [x] Add beta implementation
-- [x] Add stable version
-- [x] Setup CI
-- [x] DX improvments prettier/eslint
-- [x] Add docs
-- [x] Context initial props refactoring
-- [x] Add unit tests
-- [ ] Add examples
-- [x] Publish on NPM
-- [x] Add counter element
diff --git a/package-lock.json b/package-lock.json
index d06d1fb..a585aac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14514,6 +14514,10 @@
"webpack": ">=4.41.1 || 5.x"
}
},
+ "node_modules/react-micro-carousel": {
+ "resolved": "packages/react-simple-headless-carousel",
+ "link": true
+ },
"node_modules/react-refresh": {
"version": "0.14.2",
"dev": true,
@@ -14571,10 +14575,6 @@
"version": "16.13.1",
"license": "MIT"
},
- "node_modules/react-simple-headless-carousel": {
- "resolved": "packages/react-simple-headless-carousel",
- "link": true
- },
"node_modules/read-cache": {
"version": "1.0.0",
"dev": true,
@@ -18034,6 +18034,7 @@
}
},
"packages/react-simple-headless-carousel": {
+ "name": "react-micro-carousel",
"version": "0.0.19",
"license": "MIT",
"workspaces": [
diff --git a/packages/react-simple-headless-carousel/readme.md b/packages/react-simple-headless-carousel/readme.md
new file mode 100644
index 0000000..4a04079
--- /dev/null
+++ b/packages/react-simple-headless-carousel/readme.md
@@ -0,0 +1,159 @@
+# React Micro Carousel
+
+![example workflow](https://github.com/pstachula-dev/react-micro-carousel/actions/workflows/main.yml/badge.svg)
+
+![bundlesize](https://badgen.net/bundlephobia/minzip/react-micro-carousel)
+
+## Component features
+
+- Extremely small package size (gzipped):
+ - Javascript: 2.6kB
+ - CSS: 1.5kB
+- 0 external dependencies
+- Full typescript support
+- Built in with Tailwind, but you can always customize the styles
+- Handling touch/mouse events
+- Lazy image loading
+- Responsive support
+
+## Documentation
+
+[Simple react carousel docs](https://simple-react-carousel.onrender.com/)
+
+## How to use:
+
+### If you are using Tailwind:
+
+`tailwind.config.ts`
+
+```js
+export default {
+ content: [
+ "./src/**/*.{js,ts,jsx,tsx}",
+ "./node_modules/react-micro-carousel/**/*.js",
+ ],
+} satisfies Config;
+```
+
+### ...other way?
+
+```js
+import 'react-micro-carousel/styles.min.css';
+```
+
+### Components markup:
+
+```js
+import {
+ Carousel,
+ CarouselProvider,
+ Counter,
+ DotsGroup,
+ NextButton,
+ PrevButton,
+ Slide,
+} from 'react-micro-carousel';
+
+
+
+
+
+
+
+
+
+
+
+
+ Next
+ Prev
+
+```
+
+## Props documentation:
+
+### ``
+
+Component is used to initialize the carousel context with configuration options and wrap the other components.
+
+| Prop | Type | Default | Required |
+| ------------- | --------- | ------- | -------- |
+| children | ReactNode | | Yes |
+| slideHeight | number | 0 | Yes |
+| total | number | 0 | Yes |
+| autoPlayDelay | number | false | No |
+| slidesVisible | number | 1 | No |
+| step | number | 1 | No |
+| threshold | number | 0.25 | No |
+| infinite | boolean | false | No |
+| disableTouch | boolean | false | No |
+| lazy | boolean | true | No |
+| autoPlay | boolean | false | No |
+
+### ``
+
+A carousel that wraps the slides and provides the core functionality, such as scrolling to the next or previous slide.
+
+| Prop | Type | Default | Required |
+| ----------------- | --------- | ------- | -------- |
+| children | ReactNode | | Yes |
+| wrapperClassName | string | | No |
+| carouselClassName | string | | No |
+
+### ``
+
+A single slide in a carousel.
+
+| Prop | Type | Default | Required |
+| --------- | --------- | ------- | -------- |
+| children | ReactNode | | Yes |
+| index | number | | Yes |
+| className | string | | No |
+
+### ``
+
+A single dot.
+
+| Prop | Type | Default | Required |
+| ------------- | -------- | ------- | -------- |
+| className | string | | No |
+| colorActive | string | | No |
+| colorInactive | string | | No |
+| index | number | | Yes |
+| disabled | boolean | | No |
+| onClick | Function | | No |
+
+### ``
+
+A component that renders a group of dots, representing the slides in the carousel.
+It provides auto generated dots for the carousel.
+
+| Prop | Type | Default | Required |
+| ------------- | -------- | ------- | -------- |
+| className | string | | No |
+| dotClassName | string | | No |
+| colorActive | string | | No |
+| colorInactive | string | | No |
+| onClick | Function | | No |
+
+### ``
+
+| Prop | Type | Default | Required |
+| --------- | --------- | ------- | -------- |
+| className | string | | No |
+| children | ReactNode | | Yes |
+| onClick | Function | | No |
+
+### ``
+
+| Prop | Type | Default | Required |
+| --------- | --------- | ------- | -------- |
+| className | string | | No |
+| children | ReactNode | | Yes |
+| onClick | Function | | No |
+
+### ``
+
+| Prop | Type | Default | Required |
+| --------- | ------ | ------- | -------- |
+| className | string | | No |