benal18-modal 1.0.0 → 1.0.2

package/README.md

@@ -1,15 +1,12 @@
-# Modal
-
-## Prérequis
-
-- version de node JS
-- éditeur de texte recommandé
-- version de React
-
-## Installation
-
-- commande npm install
-
-## Utilisation
-
-................
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

package/dist/BenalModal.es.js

@@ -0,0 +1,346 @@
+import te, { useEffect as ne } from "react";
+import O from "styled-components";
+var R = { exports: {} }, p = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var D;
+function oe() {
+  if (D) return p;
+  D = 1;
+  var u = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
+  function m(f, a, s) {
+    var c = null;
+    if (s !== void 0 && (c = "" + s), a.key !== void 0 && (c = "" + a.key), "key" in a) {
+      s = {};
+      for (var b in a)
+        b !== "key" && (s[b] = a[b]);
+    } else s = a;
+    return a = s.ref, {
+      $$typeof: u,
+      type: f,
+      key: c,
+      ref: a !== void 0 ? a : null,
+      props: s
+    };
+  }
+  return p.Fragment = i, p.jsx = m, p.jsxs = m, p;
+}
+var v = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var M;
+function ae() {
+  return M || (M = 1, process.env.NODE_ENV !== "production" && (function() {
+    function u(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case T:
+          return "Fragment";
+        case J:
+          return "Profiler";
+        case q:
+          return "StrictMode";
+        case B:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case z:
+            return "Portal";
+          case G:
+            return (e.displayName || "Context") + ".Provider";
+          case V:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case X:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
+          case P:
+            r = e._payload, e = e._init;
+            try {
+              return u(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function m(e) {
+      try {
+        i(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), i(e);
+      }
+    }
+    function f(e) {
+      if (e === T) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === P)
+        return "<...>";
+      try {
+        var r = u(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = k.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function c(e) {
+      if (N.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function b(e, r) {
+      function t() {
+        C || (C = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function W() {
+      var e = u(this.type);
+      return Y[e] || (Y[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function U(e, r, t, n, d, l, h, g) {
+      return t = l.ref, e = {
+        $$typeof: S,
+        type: e,
+        key: r,
+        props: l,
+        _owner: d
+      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: W
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: h
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: g
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function j(e, r, t, n, d, l, h, g) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (ee(o)) {
+            for (n = 0; n < o.length; n++)
+              A(o[n]);
+            Object.freeze && Object.freeze(o);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else A(o);
+      if (N.call(r, "key")) {
+        o = u(e);
+        var E = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        n = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", $[o + n] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          n,
+          o,
+          E,
+          o
+        ), $[o + n] = !0);
+      }
+      if (o = null, t !== void 0 && (m(t), o = "" + t), c(r) && (m(r.key), o = "" + r.key), "key" in r) {
+        t = {};
+        for (var w in r)
+          w !== "key" && (t[w] = r[w]);
+      } else t = r;
+      return o && b(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), U(
+        e,
+        o,
+        l,
+        d,
+        a(),
+        t,
+        h,
+        g
+      );
+    }
+    function A(e) {
+      typeof e == "object" && e !== null && e.$$typeof === S && e._store && (e._store.validated = 1);
+    }
+    var _ = te, S = Symbol.for("react.transitional.element"), z = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), k = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, ee = Array.isArray, x = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    _ = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var C, Y = {}, F = _.react_stack_bottom_frame.bind(
+      _,
+      s
+    )(), I = x(f(s)), $ = {};
+    v.Fragment = T, v.jsx = function(e, r, t, n, d) {
+      var l = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return j(
+        e,
+        r,
+        t,
+        !1,
+        n,
+        d,
+        l ? Error("react-stack-top-frame") : F,
+        l ? x(f(e)) : I
+      );
+    }, v.jsxs = function(e, r, t, n, d) {
+      var l = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return j(
+        e,
+        r,
+        t,
+        !0,
+        n,
+        d,
+        l ? Error("react-stack-top-frame") : F,
+        l ? x(f(e)) : I
+      );
+    };
+  })()), v;
+}
+var L;
+function se() {
+  return L || (L = 1, process.env.NODE_ENV === "production" ? R.exports = oe() : R.exports = ae()), R.exports;
+}
+var y = se();
+function de({
+  isOpen: u,
+  onClose: i,
+  closeOnOverlayClick: m = !0,
+  closeOnEsc: f = !0,
+  children: a
+}) {
+  const s = (c) => {
+    m && c.target === c.currentTarget && i();
+  };
+  return ne(() => {
+    if (!u || !f) return;
+    const c = (b) => {
+      b.key === "Escape" && i();
+    };
+    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+  }, [u, f, i]), u ? /* @__PURE__ */ y.jsx(ue, { onClick: s, children: /* @__PURE__ */ y.jsxs(ce, { children: [
+    /* @__PURE__ */ y.jsx(le, { onClick: i, "aria-label": "Fermer la modale", children: "×" }),
+    a
+  ] }) }) : null;
+}
+const ue = O.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+`, ce = O.div`
+  background-color: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+`, le = O.button`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: #666;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: #000;
+    background-color: #f5f5f5;
+  }
+`;
+export {
+  de as default
+};

package/dist/BenalModal.umd.js

@@ -0,0 +1,61 @@
+(function(f,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("react"),require("styled-components")):typeof define=="function"&&define.amd?define(["react","styled-components"],p):(f=typeof globalThis<"u"?globalThis:f||self,f.BenalModal=p(f.React,f.styled))})(this,(function(f,p){"use strict";var T={exports:{}},R={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var A;function U(){if(A)return R;A=1;var u=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function E(d,a,s){var c=null;if(s!==void 0&&(c=""+s),a.key!==void 0&&(c=""+a.key),"key"in a){s={};for(var b in a)b!=="key"&&(s[b]=a[b])}else s=a;return a=s.ref,{$$typeof:u,type:d,key:c,ref:a!==void 0?a:null,props:s}}return R.Fragment=l,R.jsx=E,R.jsxs=E,R}var _={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var S;function z(){return S||(S=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ue?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case K:return"Profiler";case Q:return"StrictMode";case ne:return"Suspense";case oe:return"SuspenseList";case se:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case Z:return"Portal";case re:return(e.displayName||"Context")+".Provider";case ee:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case F:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function l(e){return""+e}function E(e){try{l(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),l(e)}}function d(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===F)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=g.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function c(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function t(){M||(M=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function B(){var e=u(this.type);return D[e]||(D[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function H(e,r,t,n,m,i,y,j){return t=i.ref,e={$$typeof:Y,type:e,key:r,props:i,_owner:m},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:B}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,t,n,m,i,y,j){var o=r.children;if(o!==void 0)if(n)if(ce(o)){for(n=0;n<o.length;n++)C(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else C(o);if(I.call(r,"key")){o=u(e);var v=Object.keys(r).filter(function(ie){return ie!=="key"});n=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",$[o+n]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,o,v,o),$[o+n]=!0)}if(o=null,t!==void 0&&(E(t),o=""+t),c(r)&&(E(r.key),o=""+r.key),"key"in r){t={};for(var O in r)O!=="key"&&(t[O]=r[O])}else t=r;return o&&b(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),H(e,o,i,m,a(),t,y,j)}function C(e){typeof e=="object"&&e!==null&&e.$$typeof===Y&&e._store&&(e._store.validated=1)}var k=f,Y=Symbol.for("react.transitional.element"),Z=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),re=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),oe=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),se=Symbol.for("react.activity"),ue=Symbol.for("react.client.reference"),g=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,ce=Array.isArray,w=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(e){return e()}};var M,D={},L=k.react_stack_bottom_frame.bind(k,s)(),W=w(d(s)),$={};_.Fragment=h,_.jsx=function(e,r,t,n,m){var i=1e4>g.recentlyCreatedOwnerStacks++;return N(e,r,t,!1,n,m,i?Error("react-stack-top-frame"):L,i?w(d(e)):W)},_.jsxs=function(e,r,t,n,m){var i=1e4>g.recentlyCreatedOwnerStacks++;return N(e,r,t,!0,n,m,i?Error("react-stack-top-frame"):L,i?w(d(e)):W)}})()),_}var P;function q(){return P||(P=1,process.env.NODE_ENV==="production"?T.exports=U():T.exports=z()),T.exports}var x=q();function J({isOpen:u,onClose:l,closeOnOverlayClick:E=!0,closeOnEsc:d=!0,children:a}){const s=c=>{E&&c.target===c.currentTarget&&l()};return f.useEffect(()=>{if(!u||!d)return;const c=b=>{b.key==="Escape"&&l()};return document.addEventListener("keydown",c),()=>document.removeEventListener("keydown",c)},[u,d,l]),u?x.jsx(V,{onClick:s,children:x.jsxs(G,{children:[x.jsx(X,{onClick:l,"aria-label":"Fermer la modale",children:"×"}),a]})}):null}const V=p.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+`,G=p.div`
+  background-color: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+`,X=p.button`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: #666;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: #000;
+    background-color: #f5f5f5;
+  }
+`;return J}));

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "benal18-modal",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "description": "Modale réutilisable",
+  "keywords": [
+    "Modale",
+    "react"
+  ],
+  "author": "BEN SALAH Walid",
   "type": "module",
+  "main": "dist/BenalModal.cjs.js",
+  "module": "dist/BenalModal.esm.js",
+  "types": "dist/BenalModal.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package/eslint.config.js

@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

package/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/src/App.jsx

@@ -1,19 +0,0 @@
-import { useState } from "react";
-import Modal from "../src/components/Modal";
-
-function App() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div>
-      <button onClick={() => setIsOpen(true)}>Ouvrir la modale</button>
-
-      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <p>Contenu de la modale</p>
-        <button onClick={() => setIsOpen(false)}>Fermer</button>
-      </Modal>
-    </div>
-  );
-}
-
-export default App;

package/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/Modal.jsx

@@ -1,90 +0,0 @@
-import { useEffect } from "react";
-import styled from "styled-components";
-
-function Modal({
-  isOpen,
-  onClose,
-  closeOnOverlayClick = true,
-  closeOnEsc = true,
-  children,
-}) {
-  const handleOverlayClick = (e) => {
-    // Vérifie si on a cliqué directement sur l'overlay (et non sur son contenu)
-    if (closeOnOverlayClick && e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen || !closeOnEsc) return;
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, closeOnEsc, onClose]);
-
-  if (!isOpen) return null;
-
-  return (
-    <ModalOverlay onClick={handleOverlayClick}>
-      <ModalContent>
-        <CloseButton onClick={onClose} aria-label="Fermer la modale">
-          ×
-        </CloseButton>
-        {children}
-      </ModalContent>
-    </ModalOverlay>
-  );
-}
-
-export default Modal;
-
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 50;
-`;
-
-const ModalContent = styled.div`
-  background-color: white;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-  position: relative;
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: auto;
-`;
-
-const CloseButton = styled.button`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: #666;
-  background: none;
-  border: none;
-  font-size: 18px;
-  cursor: pointer;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    color: #000;
-    background-color: #f5f5f5;
-  }
-`;

package/src/index.css

@@ -1,68 +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;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/main.jsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/vite.config.js

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})