add almost complete

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+vite.config.ts.timestamp-*

docs/guide/api.mdx

@@ -0,0 +1,129 @@
+# Api
+
+## Props
+
+### `ref`
+
+```typescript
+MutableRefObject<any> | undefined;
+```
+
+Reference to the Peel object, containing values and methods.
+
+### `className`
+
+```typescript
+string | undefined;
+```
+
+Represents the class of PeelWrapper.
+
+### `height`
+
+```typescript
+string | undefined;
+```
+
+Sets the height of PeelWrapper. Default is `100%`.
+
+### `width`
+
+```typescript
+string | undefined;
+```
+
+Sets the height of PeelWrapper. Default is `100%`.
+
+### `options`
+
+The options to pass to the underlying peel.js constructor as listed [here](https://andrewplummer.github.io/peel-js/#options).
+
+### `options.shape`
+
+```typescript
+SvgElementProps | undefined;
+```
+
+Any SVG element can be specified here which will create a subclip for the effect and allow custom shapes to be used. <a href="examples#circle">See the examples for more</a>
+
+### `peelPosition`
+
+```typescript
+{ x: number, y: number } | undefined
+```
+
+The position of the peel effect. This point is the position of the corner that is being peeled back.
+
+### `corner`
+
+```typescript
+{ x: number, y: number } | "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | undefined
+```
+
+The corner for the effect to peel back from. Can be 2 arguments as x,y coordinates or a single argument as a corner name. Default is the bottom right corner.
+
+### `constraints`
+
+```typescript
+{ x: number, y: number } | | "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | undefined | Array<{ x: number, y: number } | | "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | undefined>
+```
+
+List of constraints on the distance of the peel. This can be thought of as points on the layers that are connected and cannot be torn apart. Typically this only makes sense as a point on the outer edge, such as the left edge of an open book, or the top edge of a calendar. In this case, simply using 2 constraint points (top-left/bottom-left for a book, etc) will create the desired effect. An arbitrary point can also be used with an effect like a thumbtack holding the pages together. Can be 2 arguments as x,y coordinates or a single argument as a corner name.
+
+### `drag`
+
+```typescript
+boolean | undefined;
+```
+
+A shorthand for setting the `@drag` event to set the peel position to the mouse.
+
+### `mode`
+
+```typescript
+"book" | "calendar" | undefined;
+```
+
+A shortcut for setting predefined `constraints`. Currently `"book"` and `"calendar"`.
+
+### `fadeThreshold`
+
+```typescript
+number | undefined;
+```
+
+A threshold above which the top layer (including the backside) layer will begin to fade out. The threshold is between 0 (no peel) and 1 (top layer is fully peeled off) and is calculated based on the visible clipped area. If a peel path is set, it will use the progress along the path instead.
+
+### `timeAlongPath`
+
+```typescript
+number | undefined;
+```
+
+Sets the peel effect to a point in time (between 0 and 1) along a previously specified path. Will throw an error if no path exists.
+
+### `peelPath`
+
+```typescript
+number[] | undefined
+```
+
+A path along which the peel will follow. This can be a flat line segment (represented by 4 arguments: x1, y1, x2, y2) or a bezier curve (represented by 8 arguments: x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2 where cp1 and cp2 are the 2 bezier control points, similar to the [bezierCurveTo](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Cubic_Bezier_curves) canvas method.)
+
+## Events
+
+### `handleDrag`
+
+```typescript
+(event: MouseEvent, x: number, y: number, peel: any) => any | undefined;
+```
+
+Sets a function to be called when the user drags, either with a mouse or with a finger (using touch events).
+
+### `handlePress`
+
+```typescript
+(event: MouseEvent, peel: any) => any | undefined;
+```
+
+Sets a function to be called when the user either clicks with a mouse or taps with a finger.

docs/guide/examples.mdx

@@ -2,7 +2,9 @@ import { PeelBack, PeelBottom, PeelWrapper, PeelTop } from "../../src/index";
 
 # Examples
 
-## Simple
+## Static Examples
+
+### Simple
 
 Simplest possible example. 3 elements define the 3 layers used. A constructor sets up the effect, and a call to setPeelPosition tells it where to peel back to:
 
@@ -22,7 +24,7 @@ Simplest possible example. 3 elements define the 3 layers used. A constructor se
 </PeelWrapper>
 ```
 
-## Corner
+### Corner
 
 Any corner can be used for the peel effect:
 
@@ -56,7 +58,7 @@ Any corner can be used for the peel effect:
 </PeelWrapper>
 ```
 
-## Shadows
+### Shadows
 
 The shadow effects can be controlled through various options to the constructor (options listed below):
 
@@ -99,7 +101,7 @@ The shadow effects can be controlled through various options to the constructor
 </PeelWrapper>
 ```
 
-## Reflection
+### Reflection
 
 Adding a back reflection gives the peel a shiny effect. Reflection strength can be controller in the constructor options (see below):
 
@@ -138,7 +140,56 @@ Adding a back reflection gives the peel a shiny effect. Reflection strength can
 </PeelWrapper>
 ```
 
-## Path
+### Circle
+
+SVG shapes can also be used for clipping effects:
+
+<div style={{ padding: "20px" }}>
+  <PeelWrapper
+    height={200}
+    width={200}
+    options={{  
+      shape:{
+  circle: {
+    cx: 100,
+    cy: 100,
+    r: 100
+  }}
+
+    }}
+    peelPosition={{ x: 100, y: 80 }}
+
+>
+
+    <PeelTop style={{ backgroundColor: "#81afcb" }}></PeelTop>
+    <PeelBack style={{ backgroundColor: "#a0c7df" }}></PeelBack>
+    <PeelBottom style={{ backgroundColor: "#688394" }}></PeelBottom>
+
+  </PeelWrapper>
+</div>
+
+```jsx
+<PeelWrapper
+  height={200}
+  width={200}
+  options={{
+    shape: {
+      circle: {
+        cx: 100,
+        cy: 100,
+        r: 100,
+      },
+    },
+  }}
+  peelPosition={{ x: 100, y: 80 }}
+>
+  <PeelTop style={{ backgroundColor: "#81afcb" }}></PeelTop>
+  <PeelBack style={{ backgroundColor: "#a0c7df" }}></PeelBack>
+  <PeelBottom style={{ backgroundColor: "#688394" }}></PeelBottom>
+</PeelWrapper>
+```
+
+### Path
 
 More complex shapes such as paths can create custom shapes:
 
@@ -184,7 +235,9 @@ More complex shapes such as paths can create custom shapes:
 </PeelWrapper>
 ```
 
-## Dragging
+## Dynamic Examples
+
+### Dragging
 
 Allowing the user to drag the effect by mouse or touch.
 
@@ -211,7 +264,7 @@ Allowing the user to drag the effect by mouse or touch.
 </PeelWrapper>
 ```
 
-## Dragging Heart
+### Dragging Heart
 
 Dragging works on custom shapes as well. Note that the corner point can be set anywhere, allowing the effect to precisely follow the mouse cursor.
 
@@ -259,7 +312,7 @@ Dragging works on custom shapes as well. Note that the corner point can be set a
 </PeelWrapper>
 ```
 
-## Constraining
+### Constraining
 
 The peeling effect can be constrained at any point. This can be thought of as a point on the layers that are connected and cannot be torn apart:
 
@@ -287,7 +340,7 @@ The peeling effect can be constrained at any point. This can be thought of as a
 </PeelWrapper>
 ```
 
-## Page turning effect
+### Page turning effect
 
 Any number of corners can be constrained. Most often this is used to create a book-like effect, which there is a shortcut for:
 
@@ -315,7 +368,7 @@ Any number of corners can be constrained. Most often this is used to create a bo
 </PeelWrapper>
 ```
 
-## Fade threshold
+### Fade threshold
 
 The top layer can be faded out past a threshold which represents the clipped area of the top layer.
 
@@ -343,7 +396,7 @@ The top layer can be faded out past a threshold which represents the clipped are
 </PeelWrapper>
 ```
 
-## Fading out
+### Fading out
 
 Using the getAmountClipped method gives you greater control over behavior, such as stopping the effect after the top layer has been removed.
 
@@ -386,7 +439,7 @@ Using the getAmountClipped method gives you greater control over behavior, such
 </PeelWrapper>
 ```
 
-## Setting a peel path
+### Setting a peel path
 
 Sometimes you want the peel animation to follow an exact path rather than being unrestricted. The setPeelPath and setTimeAlongPath methods can accomplish this.
 
@@ -425,7 +478,7 @@ Sometimes you want the peel animation to follow an exact path rather than being
 </PeelWrapper>
 ```
 
-## Peel path as a bezier curve
+### Peel path as a bezier curve
 
 Sometimes you want the peel animation to follow an exact path rather than being unrestricted. The setPeelPath and setTimeAlongPath methods can accomplish this.
 
@@ -464,5 +517,8 @@ Sometimes you want the peel animation to follow an exact path rather than being
 </PeelWrapper>
 ```
 
-More examples comming soon...
+## Animated Examples
+
+Comming soon...
+
 Or you can help me to add more examples

docs/index.md

@@ -18,12 +18,12 @@ hero:
 
 features:
   - title: "Feature Rich: The powerful features"
-    details: Out of box support for i18n, full-text search etc.
+    details: Packed with powerful features to enhance your experience.
     icon: 🚀
   - title: "TypeScript: Typed API Support"
-    details: Written in TypeScript, with type definitions for APIs.
+    details: Enjoy the benefits of a typed API for better development support.
     icon: 📦
-  - title: "Customizable: The flexible way to customize"
-    details: You can customize the theme ui and the build process.
-    icon: 🎨
+  - title: "Simple: Easy to Implement"
+    details: Implementation is a breeze, complete with a straightforward description.
+    icon: ✨
 ---

src/index.tsx

@@ -171,8 +171,8 @@ function Peel(
       className={"peel " + props?.className}
       {...containerProps}
       style={{
-        height: props.height,
-        width: props.width,
+        height: props.height || "100%",
+        width: props.width || "100%",
         ...containerProps?.style,
       }}
     >
@@ -187,6 +187,7 @@ function normalizeOptions(options: PeelOptions) {
       ? peelCornersValue(options.corner)
       : undefined;
   }
+
   return options;
 }