react-magazine 1.0.0 → 1.0.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Gnanaprakash
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Gnanaprakash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,205 +1,238 @@
-# react-magazine
-
-React component for creating realistic magazine-style page flip animations with built-in controls and full TypeScript support.
-
-## Installation
-
-```bash
-npm install react-magazine
-```
-
-## Quick Start
-
-```tsx
-import { MagazineBook, Page } from 'react-magazine';
-import 'react-magazine/styles.css';
-
-function App() {
-  return (
-    <MagazineBook
-      width={400}
-      height={500}
-      showCover={true}
-      showControls={true}
-    >
-      <Page number={1}>Front Cover</Page>
-      <Page number={2}>Page 2</Page>
-      <Page number={3}>Page 3</Page>
-      <Page number={4}>Back Cover</Page>
-    </MagazineBook>
-  );
-}
-```
-
-## Features
-
-- Realistic page flip animation
-- Built-in navigation controls
-- Hard/soft page density support
-- Responsive design (fixed/stretch modes)
-- Portrait and landscape orientation
-- Touch and mouse support
-- TypeScript support
-- SSR compatible (with dynamic import)
-
-## Using the useFlipBook Hook
-
-```tsx
-import { MagazineBook, Page, useFlipBook } from 'react-magazine';
-import 'react-magazine/styles.css';
-
-function App() {
-  const { bookRef, state, flipNext, flipPrev, handlers } = useFlipBook();
-
-  return (
-    <div>
-      <MagazineBook ref={bookRef} width={400} height={500} {...handlers}>
-        <Page number={1}>Page 1</Page>
-        <Page number={2}>Page 2</Page>
-        <Page number={3}>Page 3</Page>
-        <Page number={4}>Page 4</Page>
-      </MagazineBook>
-
-      <p>Page {state.currentPage + 1} of {state.pageCount}</p>
-      <button onClick={() => flipPrev()}>Previous</button>
-      <button onClick={() => flipNext()}>Next</button>
-    </div>
-  );
-}
-```
-
-## Props
-
-### MagazineBook Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `width` | `number` | `400` | Page width in pixels |
-| `height` | `number` | `300` | Page height in pixels |
-| `size` | `'fixed' \| 'stretch'` | `'fixed'` | Size mode |
-| `startPage` | `number` | `0` | Starting page index |
-| `showCover` | `boolean` | `false` | Makes first & last pages hard (like book covers) |
-| `showControls` | `boolean` | `false` | Show built-in navigation controls |
-| `drawShadow` | `boolean` | `true` | Draw shadow when flipping |
-| `flippingTime` | `number` | `1000` | Flip animation duration (ms) |
-| `usePortrait` | `boolean` | `false` | Use portrait mode |
-| `mobileScrollSupport` | `boolean` | `true` | Enable mobile scroll |
-| `swipeDistance` | `number` | `30` | Swipe distance threshold |
-| `showPageCorners` | `boolean` | `true` | Show page corner fold on hover |
-| `disableFlipByClick` | `boolean` | `false` | Disable click to flip |
-| `clickEventForward` | `boolean` | `true` | Forward click events to children |
-| `useMouseEvents` | `boolean` | `true` | Enable mouse/touch events |
-| `maxShadowOpacity` | `number` | `1` | Shadow intensity (0-1) |
-| `autoSize` | `boolean` | `true` | Auto-resize based on container |
-| `isLoading` | `boolean` | `false` | Show loading state |
-| `disabled` | `boolean` | `false` | Disable all interactions |
-| `controlsClassName` | `string` | `''` | Custom class for controls |
-| `controlsStyle` | `CSSProperties` | `{}` | Custom style for controls |
-
-### Event Props
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `onFlip` | `(e: FlipEvent) => void` | Called when page flips |
-| `onChangeState` | `(e: StateEvent) => void` | Called when state changes |
-| `onChangeOrientation` | `(e: OrientationEvent) => void` | Called when orientation changes |
-| `onInit` | `(e: FlipEvent) => void` | Called when initialized |
-| `onUpdate` | `(e: FlipEvent) => void` | Called when updated |
-
-### Page Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `number` | `number` | - | Page number (for display) |
-| `density` | `'soft' \| 'hard'` | `'soft'` | Page density (soft bends, hard doesn't) |
-| `className` | `string` | `''` | Custom class |
-| `style` | `CSSProperties` | `{}` | Custom style |
-
-## showCover Behavior
-
-When `showCover={true}`:
-- First page automatically becomes **hard** (doesn't bend)
-- Last page automatically becomes **hard** (doesn't bend)
-- All inner pages remain **soft** (paper flip effect)
-
-```tsx
-<MagazineBook showCover={true}>
-  <Page>Front Cover (auto hard)</Page>
-  <Page>Page 2 (soft - bends)</Page>
-  <Page>Page 3 (soft - bends)</Page>
-  <Page>Back Cover (auto hard)</Page>
-</MagazineBook>
-```
-
-## Ref API Methods
-
-Access via `bookRef.current`:
-
-| Method | Description |
-|--------|-------------|
-| `flipNext(corner?)` | Flip to next page |
-| `flipPrev(corner?)` | Flip to previous page |
-| `flip(pageNum, corner?)` | Flip to specific page with animation |
-| `turnToPage(pageNum)` | Jump to page without animation |
-| `getCurrentPageIndex()` | Get current page index (0-based) |
-| `getPageCount()` | Get total page count |
-| `getOrientation()` | Get current orientation |
-| `getState()` | Get current state |
-| `pageFlip()` | Get underlying PageFlip instance |
-
-## useFlipBook Hook
-
-Returns:
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `bookRef` | `RefObject` | Ref to attach to MagazineBook |
-| `state` | `object` | `{ currentPage, pageCount, orientation, pageState, isFlipping }` |
-| `flipNext` | `function` | Flip to next page |
-| `flipPrev` | `function` | Flip to previous page |
-| `flipTo` | `function` | Flip to specific page |
-| `turnTo` | `function` | Jump without animation |
-| `canFlipNext` | `function` | Check if can flip next |
-| `canFlipPrev` | `function` | Check if can flip prev |
-| `handlers` | `object` | Event handlers to spread on MagazineBook |
-
-## Next.js Usage
-
-```tsx
-import dynamic from 'next/dynamic';
-
-const MagazineBook = dynamic(
-  () => import('react-magazine').then((mod) => mod.MagazineBook),
-  { ssr: false }
-);
-
-const Page = dynamic(
-  () => import('react-magazine').then((mod) => mod.Page),
-  { ssr: false }
-);
-```
-
-## TypeScript
-
-All types are exported:
-
-```tsx
-import type {
-  PageFlipInstance,
-  IFlipSetting,
-  IEventProps,
-  PageProps,
-  FlipEvent,
-  OrientationEvent,
-  StateEvent,
-  PageDensity,
-  PageOrientation,
-  PageState,
-  FlipCorner,
-  SizeType,
-} from 'react-magazine';
-```
-
-## License
-
-MIT
+# react-magazine
+
+React component for creating realistic magazine-style page flip animations with built-in controls and full TypeScript support.
+
+## Demo
+
+![react-magazine demo](video.gif)
+
+## Installation
+
+```bash
+npm install react-magazine
+```
+
+## Quick Start
+
+```tsx
+import { MagazineBook, Page } from 'react-magazine';
+import 'react-magazine/styles.css';
+
+  const images = [
+  "https://picsum.photos/id/1/400/500",
+  "https://picsum.photos/id/2/400/500",
+  "https://picsum.photos/id/3/400/500",
+  "https://picsum.photos/id/4/400/500",
+  "https://picsum.photos/id/5/400/500",
+  "https://picsum.photos/id/6/400/500",
+  "https://picsum.photos/id/7/400/500",
+  "https://picsum.photos/id/8/400/500",
+  "https://picsum.photos/id/9/400/500",
+  "https://picsum.photos/id/10/400/500",
+];
+
+function App() {
+  return (
+     <MagazineBook width={400} height={500} showCover={true} showControls={true}>
+        {images.map((img, index) => (
+          <Page key={index} number={index + 1}>
+            <img
+              src={img}
+              alt={`Page ${index + 1}`}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+              }}
+            />
+          </Page>
+        ))}
+      </MagazineBook>
+  );
+}
+```
+
+## Features
+
+- Realistic page flip animation
+- Built-in navigation controls
+- Hard/soft page density support
+- Responsive design (fixed/stretch modes)
+- Portrait and landscape orientation
+- Touch and mouse support
+- TypeScript support
+- SSR compatible (with dynamic import)
+
+## Using the useFlipBook Hook
+
+```tsx
+import { MagazineBook, Page, useFlipBook } from 'react-magazine';
+import 'react-magazine/styles.css';
+
+const images = [
+  "https://picsum.photos/id/1/400/500",
+  "https://picsum.photos/id/2/400/500",
+  "https://picsum.photos/id/3/400/500",
+  "https://picsum.photos/id/4/400/500",
+  "https://picsum.photos/id/5/400/500",
+  "https://picsum.photos/id/6/400/500",
+  "https://picsum.photos/id/7/400/500",
+  "https://picsum.photos/id/8/400/500",
+  "https://picsum.photos/id/9/400/500",
+  "https://picsum.photos/id/10/400/500",
+];
+
+function App() {
+  const { bookRef, state, flipNext, flipPrev, handlers } = useFlipBook();
+
+  return (
+    <div>
+      <MagazineBook ref={bookRef} width={400} height={500} {...handlers}>
+        <Page number={1}>Page 1</Page>
+        <Page number={2}>Page 2</Page>
+        <Page number={3}>Page 3</Page>
+        <Page number={4}>Page 4</Page>
+      </MagazineBook>
+      <button onClick={() => flipPrev()}>Previous</button>
+        <span>Page {state.currentPage + 1} of {state.pageCount}</span>
+      <button onClick={() => flipNext()}>Next</button>
+    </div>
+  );
+}
+```
+
+## Props
+
+### MagazineBook Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number` | `400` | Page width in pixels |
+| `height` | `number` | `300` | Page height in pixels |
+| `size` | `'fixed' \| 'stretch'` | `'fixed'` | Size mode |
+| `startPage` | `number` | `0` | Starting page index |
+| `showCover` | `boolean` | `false` | Makes first & last pages hard (like book covers) |
+| `showControls` | `boolean` | `false` | Show built-in navigation controls |
+| `drawShadow` | `boolean` | `true` | Draw shadow when flipping |
+| `flippingTime` | `number` | `1000` | Flip animation duration (ms) |
+| `usePortrait` | `boolean` | `false` | Use portrait mode |
+| `mobileScrollSupport` | `boolean` | `true` | Enable mobile scroll |
+| `swipeDistance` | `number` | `30` | Swipe distance threshold |
+| `showPageCorners` | `boolean` | `true` | Show page corner fold on hover |
+| `disableFlipByClick` | `boolean` | `false` | Disable click to flip |
+| `clickEventForward` | `boolean` | `true` | Forward click events to children |
+| `useMouseEvents` | `boolean` | `true` | Enable mouse/touch events |
+| `maxShadowOpacity` | `number` | `1` | Shadow intensity (0-1) |
+| `autoSize` | `boolean` | `true` | Auto-resize based on container |
+| `isLoading` | `boolean` | `false` | Show loading state |
+| `disabled` | `boolean` | `false` | Disable all interactions |
+| `controlsClassName` | `string` | `''` | Custom class for controls |
+| `controlsStyle` | `CSSProperties` | `{}` | Custom style for controls |
+
+### Event Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `onFlip` | `(e: FlipEvent) => void` | Called when page flips |
+| `onChangeState` | `(e: StateEvent) => void` | Called when state changes |
+| `onChangeOrientation` | `(e: OrientationEvent) => void` | Called when orientation changes |
+| `onInit` | `(e: FlipEvent) => void` | Called when initialized |
+| `onUpdate` | `(e: FlipEvent) => void` | Called when updated |
+
+### Page Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `number` | `number` | - | Page number (for display) |
+| `density` | `'soft' \| 'hard'` | `'soft'` | Page density (soft bends, hard doesn't) |
+| `className` | `string` | `''` | Custom class |
+| `style` | `CSSProperties` | `{}` | Custom style |
+
+## showCover Behavior
+
+When `showCover={true}`:
+- First page automatically becomes **hard** (doesn't bend)
+- Last page automatically becomes **hard** (doesn't bend)
+- All inner pages remain **soft** (paper flip effect)
+
+```tsx
+<MagazineBook showCover={true}>
+  <Page>Front Cover (auto hard)</Page>
+  <Page>Page 2 (soft - bends)</Page>
+  <Page>Page 3 (soft - bends)</Page>
+  <Page>Back Cover (auto hard)</Page>
+</MagazineBook>
+```
+
+## Ref API Methods
+
+Access via `bookRef.current`:
+
+| Method | Description |
+|--------|-------------|
+| `flipNext(corner?)` | Flip to next page |
+| `flipPrev(corner?)` | Flip to previous page |
+| `flip(pageNum, corner?)` | Flip to specific page with animation |
+| `turnToPage(pageNum)` | Jump to page without animation |
+| `getCurrentPageIndex()` | Get current page index (0-based) |
+| `getPageCount()` | Get total page count |
+| `getOrientation()` | Get current orientation |
+| `getState()` | Get current state |
+| `pageFlip()` | Get underlying PageFlip instance |
+
+## useFlipBook Hook
+
+Returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `bookRef` | `RefObject` | Ref to attach to MagazineBook |
+| `state` | `object` | `{ currentPage, pageCount, orientation, pageState, isFlipping }` |
+| `flipNext` | `function` | Flip to next page |
+| `flipPrev` | `function` | Flip to previous page |
+| `flipTo` | `function` | Flip to specific page |
+| `turnTo` | `function` | Jump without animation |
+| `canFlipNext` | `function` | Check if can flip next |
+| `canFlipPrev` | `function` | Check if can flip prev |
+| `handlers` | `object` | Event handlers to spread on MagazineBook |
+
+## Next.js Usage
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const MagazineBook = dynamic(
+  () => import('react-magazine').then((mod) => mod.MagazineBook),
+  { ssr: false }
+);
+
+const Page = dynamic(
+  () => import('react-magazine').then((mod) => mod.Page),
+  { ssr: false }
+);
+```
+
+## TypeScript
+
+All types are exported:
+
+```tsx
+import type {
+  PageFlipInstance,
+  IFlipSetting,
+  IEventProps,
+  PageProps,
+  FlipEvent,
+  OrientationEvent,
+  StateEvent,
+  PageDensity,
+  PageOrientation,
+  PageState,
+  FlipCorner,
+  SizeType,
+} from 'react-magazine';
+```
+
+## License
+
+MIT

package/dist/styles.css

@@ -1,164 +1,164 @@
-/* React Magazine Styles */
-
-.react-magazine {
-  display: block;
-  position: relative;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  touch-action: pan-y;
-  box-sizing: border-box;
-}
-
-.react-magazine canvas {
-  display: block;
-}
-
-.react-magazine-page {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  background-color: #fff;
-}
-
-/* Page content wrapper */
-.react-magazine-page-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-/* Hard page styling */
-.react-magazine-page[data-density="hard"] {
-  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Page number styling */
-.react-magazine-page-number {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 12px;
-  color: #666;
-}
-
-/* Cover page styling */
-.react-magazine-cover {
-  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
-  color: white;
-}
-
-/* Front cover */
-.react-magazine-cover--front {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-}
-
-/* Back cover */
-.react-magazine-cover--back {
-  background: linear-gradient(135deg, #0f3460 0%, #16213e 50%, #1a1a2e 100%);
-}
-
-/* Loading state */
-.react-magazine--loading {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* Disabled state */
-.react-magazine--disabled {
-  pointer-events: none;
-}
-
-/* Portrait mode adjustments */
-.react-magazine--portrait .react-magazine-page {
-  width: 100%;
-}
-
-/* Landscape mode adjustments */
-.react-magazine--landscape .react-magazine-page {
-  width: 50%;
-}
-
-/* Animation classes */
-@keyframes magazine-enter {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.react-magazine--animated {
-  animation: magazine-enter 0.3s ease-out;
-}
-
-/* Controls */
-.react-magazine-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.react-magazine-controls {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 15px;
-  margin-top: 8px;
-}
-
-.react-magazine-controls__btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  font-size: 13px;
-  font-weight: 500;
-  border: none;
-  border-radius: 6px;
-  background: #2196F3;
-  color: white;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.react-magazine-controls__btn:hover {
-  background: #1976D2;
-}
-
-.react-magazine-controls__btn:active {
-  background: #1565C0;
-}
-
-.react-magazine-controls__btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: #90CAF9;
-}
-
-.react-magazine-controls__btn:disabled:hover {
-  background: #90CAF9;
-}
-
-.react-magazine-controls__btn svg {
-  flex-shrink: 0;
-}
-
-.react-magazine-controls__page-info {
-  font-size: 13px;
-  color: #666;
-  padding: 6px 12px;
-  background: #f5f5f5;
-  border-radius: 4px;
-}
+/* React Magazine Styles */
+
+.react-magazine {
+  display: block;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  touch-action: pan-y;
+  box-sizing: border-box;
+}
+
+.react-magazine canvas {
+  display: block;
+}
+
+.react-magazine-page {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+/* Page content wrapper */
+.react-magazine-page-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Hard page styling */
+.react-magazine-page[data-density="hard"] {
+  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Page number styling */
+.react-magazine-page-number {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #666;
+}
+
+/* Cover page styling */
+.react-magazine-cover {
+  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+  color: white;
+}
+
+/* Front cover */
+.react-magazine-cover--front {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+}
+
+/* Back cover */
+.react-magazine-cover--back {
+  background: linear-gradient(135deg, #0f3460 0%, #16213e 50%, #1a1a2e 100%);
+}
+
+/* Loading state */
+.react-magazine--loading {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Disabled state */
+.react-magazine--disabled {
+  pointer-events: none;
+}
+
+/* Portrait mode adjustments */
+.react-magazine--portrait .react-magazine-page {
+  width: 100%;
+}
+
+/* Landscape mode adjustments */
+.react-magazine--landscape .react-magazine-page {
+  width: 50%;
+}
+
+/* Animation classes */
+@keyframes magazine-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.react-magazine--animated {
+  animation: magazine-enter 0.3s ease-out;
+}
+
+/* Controls */
+.react-magazine-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.react-magazine-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  margin-top: 8px;
+}
+
+.react-magazine-controls__btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 6px;
+  background: #2196F3;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.react-magazine-controls__btn:hover {
+  background: #1976D2;
+}
+
+.react-magazine-controls__btn:active {
+  background: #1565C0;
+}
+
+.react-magazine-controls__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #90CAF9;
+}
+
+.react-magazine-controls__btn:disabled:hover {
+  background: #90CAF9;
+}
+
+.react-magazine-controls__btn svg {
+  flex-shrink: 0;
+}
+
+.react-magazine-controls__page-info {
+  font-size: 13px;
+  color: #666;
+  padding: 6px 12px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}

package/package.json

@@ -1,80 +1,80 @@
-{
-  "name": "react-magazine",
-  "version": "1.0.0",
-  "description": "A lightweight React component for realistic page-flip animations, featuring built-in navigation controls, full TypeScript support, and easy style customization.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      }
-    },
-    "./styles.css": "./dist/styles.css"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "scripts": {
-    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:css",
-    "build:esm": "rollup -c rollup.config.mjs --environment FORMAT:esm",
-    "build:cjs": "rollup -c rollup.config.mjs --environment FORMAT:cjs",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
-    "build:css": "node -e \"require('fs').mkdirSync('dist', {recursive: true}); require('fs').copyFileSync('src/styles.css', 'dist/styles.css')\"",
-    "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "page-flip": "^2.0.7"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "rollup": "^4.9.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.0"
-  },
-  "keywords": [
-    "react",
-    "pageflip",
-    "flipbook",
-    "magazine",
-    "book",
-    "page-turn",
-    "page-flip",
-    "flip-book",
-    "typescript",
-    "react-component"
-  ],
-  "author": "Gnanaprakash",
-  "license": "MIT",
-  "homepage": "https://github.com/Gnanaprakash-Dev/react-magazine#readme",
-  "bugs": {
-    "url": "https://github.com/Gnanaprakash-Dev/react-magazine/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Gnanaprakash-Dev/react-magazine.git"
-  }
-}
+{
+  "name": "react-magazine",
+  "version": "1.0.1",
+  "description": "A lightweight React component for realistic page-flip animations, featuring built-in navigation controls, full TypeScript support, and easy style customization.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:css",
+    "build:esm": "rollup -c rollup.config.mjs --environment FORMAT:esm",
+    "build:cjs": "rollup -c rollup.config.mjs --environment FORMAT:cjs",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:css": "node -e \"require('fs').mkdirSync('dist', {recursive: true}); require('fs').copyFileSync('src/styles.css', 'dist/styles.css')\"",
+    "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "page-flip": "^2.0.7"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.0"
+  },
+  "keywords": [
+    "react",
+    "pageflip",
+    "flipbook",
+    "magazine",
+    "book",
+    "page-turn",
+    "page-flip",
+    "flip-book",
+    "typescript",
+    "react-component"
+  ],
+  "author": "Gnanaprakash",
+  "license": "MIT",
+  "homepage": "https://github.com/Gnanaprakash-Dev/react-magazine#readme",
+  "bugs": {
+    "url": "https://github.com/Gnanaprakash-Dev/react-magazine/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gnanaprakash-Dev/react-magazine.git"
+  }
+}