@gfazioli/mantine-flip 1.0.9 → 1.0.10

package/README.md

@@ -1,3 +1,66 @@
 # Mantine Flip Component
 
+https://github.com/gfazioli/mantine-flip/assets/432181/67dce395-4a33-42c9-a71d-8fea81712463
+
+This component is created on top of the [Mantine](https://mantine.dev/) library.
+It allows for easy management of two separate views, such as in the cases of a registration form and a login form.
+Essentially, when switching between views, the component will handle the flip animation.
+
+## Installation
+
+```sh
+npm install @gfazioli/mantine-flip
+```
+or 
+
+```sh
+yarn add @gfazioli/mantine-flip
+```
+
+## Usage
+
+```tsx
+import { Flip } from '@gfazioli/mantine-flip';
+
+function Demo() {
+  return (
+    <Flip h={200} w={200}>
+
+        <Paper radius="md" withBorder p="lg" shadow="md">
+          <h3>Front Card</h3>
+          <Flip.Target>
+            <Button>Flip Back</Button>
+          </Flip.Target>
+        </Paper>
+
+        <Paper radius="md" withBorder p="lg" shadow="md">
+          <h3>Back Card</h3>
+          <Flip.Target>
+            <Button>Flip Front</Button>
+          </Flip.Target>
+        </Paper>
+
+    </Flip>
+  );
+}
+```
+
+As you can see, the `Flip` component wraps two children, which are the two views that you want to flip between.
+The `Flip.Target` component is used to define the trigger for the flip animation. It can be any component, such as a button, or a link, or even a div.
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| perspective | string | 1000px | The perspective property defines how far the object is away from the user. |
+| duration | number | .8 | The duration in seconds of the flip animation. |
+| easing | string | ease-in-out | The easing function to be used for the flip animation. |
+| flipped | boolean | false | The initial state of the controlled Flip component. |
+| defaultFlipped | boolean | false | The default state of the uncontrolled flip component. |
+| direction | 'horizontal' or 'vertical' | 'horizontal' | The direction of the flip animation. |
+| directionFlipIn | 'negative' or 'positive' | 'negative' | The direction of the flip animation when flipping in. |
+| directionFlipOut | 'negative' or 'positive' | 'positive' | The direction of the flip animation when flipping out. |
+| onChange | (flipped: boolean) => void | - | Callback to be called when the flip state changes. |
+| onBack | () => void | - | Callback to be called when the flip state changes to false. |
+| onFront | () => void | - | Callback to be called when the flip state changes to true. |
 

package/dist/cjs/index.cjs

@@ -2,8 +2,10 @@
 'use strict';
 
 var Flip = require('./Flip.cjs');
+var Flip_context = require('./Flip.context.cjs');
 
 
 
 exports.Flip = Flip.Flip;
+exports.useFlipContext = Flip_context.useFlipContext;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/index.mjs

@@ -1,2 +1,3 @@
 export { Flip } from './Flip.mjs';
+export { useFlipContext } from './Flip.context.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/index.d.mts

@@ -1,2 +1,3 @@
 export { Flip } from './Flip';
-export type { FlipBaseProps, FlipCssVariables, FlipDirection, FlipFactory, FlipIn, FlipOut, } from './Flip';
+export type { FlipBaseProps, FlipCssVariables, FlipDirection, FlipFactory, FlipIn, FlipOut } from './Flip';
+export { useFlipContext } from './Flip.context';

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { Flip } from './Flip';
-export type { FlipBaseProps, FlipCssVariables, FlipDirection, FlipFactory, FlipIn, FlipOut, } from './Flip';
+export type { FlipBaseProps, FlipCssVariables, FlipDirection, FlipFactory, FlipIn, FlipOut } from './Flip';
+export { useFlipContext } from './Flip.context';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gfazioli/mantine-flip",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.",
   "homepage": "https://github.com/gfazioli/mantine-flip#readme",
   "packageManager": "yarn@4.0.1",